html页面生成pdf下载

zhanglv

html2canvas 生成pdf文件里面的css不能带transform属性，缩放，旋转的属性不能用。内容会打印不出来

1. <script src="/static/default/web/js/html2canvas.js"></script>
   
2.                         <script src="/static/default/web/js/jspdf.debug.js"></script>
   
3.                         <script src="/static/default/web/js/canvas2image.js"></script>
   
4.                         <script>
   
5.                                 function exportReportTemplet() {
   
6.                                         var element = $("#print"); // 这个dom元素是要导出pdf的div容器
   
7.                                         var w = element.width(); // 获得该容器的宽
   
8.                                         var h = element.height(); // 获得该容器的高
   
9.                                         var offsetTop = element.offset().top; // 获得该容器到文档顶部的距离
   
10.                                         var offsetLeft = element.offset().left; // 获得该容器到文档最左的距离
    
11.                                         var canvas = document.createElement("canvas");
    
12.                                         canvas.width = w * 2; // 将画布宽&&高放大两倍
    
13.                                         canvas.height = h * 2;
    
14.                                         var context = canvas.getContext("2d");
    
15.                                         var scale = 2;
    
16.                                         context.scale(2, 2);
    
17.                                         //  context.translate(-offsetLeft - abs, -offsetTop);
    
18. 
    
19.                                         var opts = {
    
20.                                                 scale: scale,
    
21.                                                 canvas: canvas,
    
22.                                                 width: w,
    
23.                                                 height: h,
    
24.                                                 useCORS: true,
    
25.                                                 background: '#FFF'
    
26. 
    
27.                                         }
    
28.                                         $(window).scrollTop(offsetTop);
    
29. 
    
30.                                         html2canvas(element, opts).then(function(canvas) {
    
31.                                                 allowTaint: false;
    
32.                                                 taintTest: false;
    
33.                                                 var contentWidth = canvas.width;
    
34.                                                 var contentHeight = canvas.height;
    
35.                                                 //一页pdf显示html页面生成的canvas高度;
    
36.                                                 var pageHeight = contentWidth / 592.28 * 841.89;
    
37.                                                 //未生成pdf的html页面高度
    
38.                                                 var leftHeight = contentHeight;
    
39.                                                 //页面偏移
    
40.                                                 var position = 0;
    
41.                                                 //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    
42.                                                 var imgWidth = 595.28;
    
43.                                                 var imgHeight = 592.28 / contentWidth * contentHeight;
    
44. 
    
45.                                                 var pageData = canvas.toDataURL('image/jpeg', 1.0);
    
46.                                                 //   var oCanvas = document.getElementById("print");
    
47.                                                 // Canvas2Image.saveAsJPEG(oCanvas);
    
48.                                                 var pdf = new jsPDF('', 'pt', 'a4');
    
49. 
    
50.                                                 //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
    
51.                                                 //当内容未超过pdf一页显示的范围，无需分页
    
52.                                                 if (leftHeight < pageHeight) {
    
53.                                                         pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
    
54.                                                 } else { // 分页
    
55.                                                         while (leftHeight > 0) {
    
56.                                                                 pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
    
57.                                                                 leftHeight -= pageHeight;
    
58.                                                                 position -= 841.89;
    
59.                                                                 //避免添加空白页
    
60.                                                                 if (leftHeight > 0) {
    
61.                                                                         pdf.addPage();
    
62.                                                                 }
    
63.                                                         }
    
64.                                                 }
    
65.                                                 pdf.save('{$xinghao}.pdf');
    
66.                                         })
    
67. 
    
68.                                 }
    
69.                         </script>

复制代码

zhanglv

如果打印区域有问题，调整上面：context.scale(2, 2);数值微调即可