前端之美

前端打印

2019-05-21  本文已影响90人  取个帅气的名字真好
效果图

步骤:

1、用html2canvas,将html转image
2、image放入jsPDF中
3、window.print()

步骤:

1、直接使用jsPDFjsPDF
2、window.print()

注:方法2打印很清晰,但实现起来比较麻烦。只打印文字建议用方法2

本文采用方法1
1、用html2canvas,将html转image。(base64)

 html2canvas(document.querySelector(".xxx")).then(canvas => {
        let imgData = canvas.toDataURL("image/JPEG");
        console.log(imgData);
 });

2、image放入jsPDF中

        let doc = new jsPDF("p", "mm");
 doc.addImage((imageData,format,x,y,width,height,alias,compression,rotation);

addImage(imageData,format,x,y,width,height,alias,compression,rotation)
imageData:imageData作为base64编码的DataUrl或Image-HTMLElement或Canvas-HTMLElement
format:文件格式如果文件类型识别失败或者需要指定Canvas-Element(Canvas的默认值为JPEG),例如'JPEG','PNG','WEBP'
x:x坐标(在PDF文档开始时声明的单位)对着页面的左边缘

未完待续...

上一篇 下一篇

猜你喜欢

热点阅读