javascript - 在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 为其提供适合您的用例的位置