在 pdfmake 中嵌入背景图像

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: {
          image: AegleBase64,
          width: 200,
          opacity: 0.05,
          absolutePosition: { x: 150, y: 250 },
        },

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

在 pdfmake 中嵌入背景图像

Embedding a background image in pdfmake

javascript

angularjs

pdfmake