Html到Canvas到Base64到PDF

Question

所以我正在尝试找出一种完全在客户端将html转换为pdf的方法,在某处我读到你可以在客户端将base64转换为pdf,从那里我记得你可以从html创建一个画布和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"data:",就好像它没有加载base64字符串一样.任何帮助将不胜感激,我可能会过度思考这一点,我确信有一个更简单的方法.这是问题的一个方面.

Answer 1

问题

我想首先,我猜你的代码会遇到什么问题.首先,不是setTimeout"pdf-ing"代码应该在内部onRendered,您可能会发现代码在可以呈现画布之前运行.

接下来,您将如何为数据库中的PDF添加前缀.用一个data:application/pdf;base64,.Canvas已经输出完整的数据库.例如data:image/PNG;base64,BASE64DATAHERE....你正在做的是为前缀添加data:application/pdf:base64,所以它看起来像是data:application/pdf:base64,data:image/PNG;base64,BASE64DATAHERE...错误的.您需要完全替换前缀.我在这里做了一个简单的演示,在那里我替换了一个PNG数据库jpeg.

代码是

//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图像数据.

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

这将我们带到您的代码的最终问题.据我所知,在大多数情况下,你只能通过更改datauri来实际转换.我尝试通过手动将图像datauri更改为带有pdf前缀的datauri来测试它.Chrome加载了它的内置pdf插件,但它"无法加载".

解

环顾四周实际上是用javascript编写的pdf编写器:

jsPDF

它有一个可以使用的pdf渲染,并有各种各样的方法,你可以看看.例如,您可以使用该.addImage()方法从datauri创建pdf .我更新了你的代码以使用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")
  }
});

它似乎运作良好.