时间戳

首页 > 解决方案 > JS JQUERY JSPDF 如何从 BLOB 对象下载图像和输入值作为 PDF

javascript - JS JQUERY JSPDF 如何从 BLOB 对象下载图像和输入值作为 PDF

问题描述

我能够将我的 HTML 代码转换为 PDF 格式的 BLOB 对象。

    var that = this;
    var doc = new jsPDF('p', 'pt', 'a4');
    var htmlString = '<div class="container"> <img src="base64image" alt="Image"> <input value="testing"><p> Paragraph</p> <label class="bold" for="fname">Vehicle</label></div>';

    doc.fromHTML(htmlString, 20, 20, {}, function (bla) {
        doc.save('saveDOC.pdf'); // After downloading PDF i can see image and Label. But i cant see my input values.
    },0);

    // Below code is to convert HTML into Blob as PDF

    var blob = new Blob([doc.output("blob")], {
        type: "application/pdf"
    });

在上面的代码变量 htmlString中包含<img/>, <input/>, <label/>. 当我尝试将 BLOB 对象下载为 PDF 时，我得到的是空白 PDF。但是当我删除时<img/>，<input/>我可以查看 BLOB 对象 PDF 中的内容。

以下是将 BLOB 转换为 PDF 的代码。

const downloadFile = (blob, fileName) => {
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    document.body.append(link);
    link.click();
    link.remove();
    setTimeout(() => URL.revokeObjectURL(link.href), 7000);
};
downloadFile(new Blob([doc.output("blob")]), "document.pdf");

如何从 BLOB 对象获取图像和输入值到下载的 PDF 中？

先感谢您。

标签： javascriptjqueryjspdf

解决方案

关于 jsPdf，您必须了解两件事，这可能是您的问题：

  1. 关于图像。jsPDf 尝试使用 JavaScript 读取图像并放入 PDF。由于内容安全策略标准，jsPdf 无法添加其他域中存在的图像。（除非他们允许）。网页可以将这些图像嵌入到页面中，但 JavaScript 无法访问这些图像的内容。这就像一个 IFRAME。您可以添加嵌入另一个网站，但无法访问它。想一想将嵌入 YouTube 并能够获取您的 Google 用户名的人。不可能。图像也一样。如果您使用示例中的数据，则可能存在对图像进行编码的问题（您没有提供输入）

  2. 关于输入字段。jsPdf 不读取输入中的文本。它不是 HTML 的一部分，它只是正确的状态（即使你把它放在 value 属性中）。jsPdf 也不会读取链接的颜色（如果您访问过或没有...，它只是状态）。因此，在您的情况下，我建议您将所有输入字段转换为具有相同样式的简单文本（您可以使用 DIV 元素...）

推荐阅读