在pdfmake中嵌入背景图像答案

【问题标题】：Embedding a background image in pdfmake在pdfmake中嵌入背景图像
【发布时间】：2015-06-13 15:08:51
【问题描述】：

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

以前有人做过吗？使用 pdfmake 的背景图像？我想就如何强制它抓住它并实际将其置于后台获得一些建议。谢谢。

【问题讨论】：

标签： javascript angularjs pdfmake

【解决方案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 和宽度对于让图像出现在背景中至关重要。

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

【讨论】：

我可以直接传递 url 而不是 base64 吗？我的 base64 图像没有出现在 PDF 中，可能是什么问题？
我想我之前尝试过，但没有成功。不幸的是，我没有编写这段代码，所以我无法告诉你什么可行，什么不可行。你最好的选择是尝试看看。如果您的原始图像尺寸太大，那将是一个问题。先尝试一些小的东西。

【解决方案2】：

这将使您的文本与您的图像重叠（将充当背景图像）。此解决方案也适用于多张图片。

示例代码：

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

【讨论】：

【解决方案3】：

你也可以使用背景属性

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

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

【讨论】：