javascript - Html 到 Canvas 到 Base64 到 PDF

Question

所以我正在尝试找出一种完全在客户端将 html 转换为 pdf 的方法，我在某个地方读到你可以在客户端将 base64 转换为 pdf，然后我记得你可以从那里创建一个来自 html 的 Canvas 和来自 Canvas 的 Base 64。所以我让一切正常工作，直到将 base64 转换为 pdf。我似乎无法让最后一部分工作。这是我的代码

var element =  document.getElementById('canvas1');
        console.log(element);
if (typeof(element) == 'undefined' || element == null)
{
        html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
    $('canvas').attr( 'id', 'canvas1' );
  }
});
    }
    setTimeout(function() {
 canvas = document.getElementById("canvas1");
var jpegUrl = canvas.toDataURL("image/jpeg");
var pngUrl = canvas.toDataURL(); // PNG is the default
console.log("jp"+jpegUrl);
console.log("png"+pngUrl);
window.open("data:application/pdf;base64," + pngUrl);
console.log('new');
},500);

我正在使用 html2canvas 库将 html 转换为 canvas 并将其附加到 body 上，到目前为止，一切正常。但为什么我不能将 base64 转换为 pdf。它只是打开一个带有 url“数据:”的空白页面，就好像它没有加载 base64 字符串一样。任何帮助将不胜感激，我可能会过度思考这个问题并且我确信有更简单的方法。这是一个jsfiddle的问题。

Answer 1

问题

我想首先，我们将检查您的代码我想有什么问题。首先，“pdf-ing”代码应该位于 onRendered 中，而不是 setTimeout，您可能会发现代码在 Canvas 呈现之前运行。

接下来，您如何为来自 datauri 的 PDF 添加前缀。使用 data:application/pdf;base64,。 Canvas 已经输出了完整的数据。例如 data:image/PNG;base64,BASE64DATAHERE...。您正在做的是为 data:application/pdf:base64, 添加前缀，因此它看起来像 data:application/pdf:base64,data:image/PNG;base64,BASE64DATAHERE。 .. 这是错误的。您需要完全替换前缀。我做了一个简单的 demo of this here我用 jpeg 替换了 PNG datauri。

代码是

//datauri is an image with a datauri of a png
prefixJpg.src="data:image/jpeg;base64,"+datauri.src
replaceJpg.src="data:image/jpeg;base64,"+datauri.src.substring(22) 
//remove the first 22 characters

输出应该是这样的

无法呈现前缀，因为它不是有效的 base64 图像数据。

继续，查看输出，我们注意到带有 jpeg datauri 的图像具有透明背景。 JPEG 不能有透明背景。所以本质上，数据仍然是 PNG，只是因为浏览器接受了宽松的渲染器，虽然它说它是 jpeg，但它实际上仍然是 png，并且仍然显示它。

这给我们带来了您的代码的最后一个问题。据我所知，在大多数情况下，您实际上无法仅通过更改 datauri 来转换某些内容。我尝试通过手动将图像 datauri 更改为带有 pdf 前缀的 datauri 来对此进行测试。 Chrome 加载了它的内置 pdf 插件，但它“加载失败”。

---

解决方案

环顾四周，实际上有一个用 javascript 编写的 pdf 编写器:

jsPDF

它有一个呈现的 pdf 可供您使用，并且具有您可以查看的各种方法。例如，您可以使用 .addImage() 方法从 datauri 创建 pdf。 I updated your code to use jsPDF .

 html2canvas(document.body, {
  onrendered: function(canvas) {
    var pdf = new jsPDF();
    var marginLeft=20;
    var marginRight=20
    pdf.addImage(canvas.toDataURL("image/jpeg"),"jpeg",marginLeft,marginRight)
    window.location=pdf.output("datauristring")
  }
});

而且它似乎运作良好。