Question

我正在使用pdfmake http://bpampuch.github.io/pdfmake/index.html#/gettingstarted来实现html到pdf的转换。为了创建PDF，我使用了一些硬编码文本，并使用AngularJS从.json文件中提取了一些文本。一切都适用于背景图像的例外。

以前有人这样做过吗？使用pdfmake的背景图片？我想得到一些建议，如何强迫它抓住它并实际把它放在后台。感谢。

Answer 1

事实证明，为了将图像设置为背景，需要确定.pdf输出大小，适当调整bkg图像的大小，然后在函数中指示所有维度，如下所示（我正在使用AngularJS））：

$scope.pdfMaker = function() {
var docDefinition = {
  pageSize: 'LETTER',
  background: [
   {
       image: 'data:image/jpeg;base64,/9j/4QAY...',
       width: 792
   }
 ],
 //other parameters go here
}

指示pageSize和图像宽度对于让图像显示在背景中至关重要。

如果此方法存在错误，或者是否有人以更简单的方式成功完成，请告诉我。

Answer 2

这会使您的文字与您的图像重叠（将作为背景图像）。此解决方案也适用于多个图像。

示例代码：

var dd = {
    content: [
        {
            image: 'sampleImage.jpg',
            width: 200
        },
        {
            text: 'Text over image',
            absolutePosition: {x: 100, y: 50}
        }       
    ]
}

Answer 3

您还可以使用background属性

 background: {
          image: AegleBase64,
          width: 200,
          opacity: 0.05,
          absolutePosition: { x: 150, y: 250 },
        },

它允许您指定图像的宽度并使用absolutePosition为其提供适合您使用情况的位置

在pdfmake中嵌入背景图像

3 个答案: