js打印页面局部某个class并保存为pdf文件

我不是做前端的，但是也了解一些，所以大概知道怎么用，这里就记录一下。

0. 前提

由于我本地并没有javascript相关的前端开发环境，代码我是直接运行在谷歌的console中，所以需要考虑如何在控制台中引用之后要用的html2canvas这个包。

参考：

在JavaScript控制台中包含jQuery

采用其中的方法，大致如下：

var h2c = document.createElement('script');
h2c.src = "https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js";
document.getElementsByTagName('head')[0].appendChild(jq);
html2canvas.noConflict();

其中，这个库的维护地址在：https://www.bootcdn.cn/html2canvas/
建议及时更新最新版本的js链接
在这里插入图片描述
使用时，报错：VM739:28 Uncaught (in promise) ReferenceError: jsPDF is not defined

也就是还缺一个库，继续导入

1. 导出成pdf

var html2canvas= document.createElement('script'); 
html2canvas.src = "https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js";
document.getElementsByTagName('head')[0].appendChild(html2canvas);

var jspdf= document.createElement('script'); 
jspdf.src = "https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js";
document.getElementsByTagName('head')[0].appendChild(jspdf);
// html2canvas.noConflict();

function pdfDo() {
    
    
        var isDo = confirm("确定导出pdf页面");
        if (!isDo) {
    
     return; }
        var target = document.getElementsByClassName("MsoNormalTable")[0];
        target.style.background = "#FFFFFF";

        html2canvas(target, {
    
    
            onrendered: function (canvas) {
    
    
                var contentWidth = canvas.width;
                var contentHeight = canvas.height;

                //一页pdf显示html页面生成的canvas高度;
                var pageHeight = contentWidth / 592.28 * 841.89;
                //未生成pdf的html页面高度
                var leftHeight = contentHeight;
                //页面偏移
                var position = 0;
                //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                var imgWidth = 595.28;
                var imgHeight = 592.28 / contentWidth * contentHeight;

                var pageData = canvas.toDataURL('image/jpeg', 1.0);

                var pdf = new jsPDF('', 'pt', 'a4');

                //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                //当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
    
    
                    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
                } else {
    
    
                    while (leftHeight > 0) {
    
    
                        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight;
                        position -= 841.89;
                        //避免添加空白页
                        if (leftHeight > 0) {
    
    
                            pdf.addPage();
                        }
                    }
                }
                pdf.save("pdf_file_name.pdf");
            }
        })
    }

这样修改之后确实可以运行了，但是生成的pdf并不清晰，同时其中的图片没有打印出来。生成的是这样：
在这里插入图片描述

参考：

这个文章写的很全面，把该涉及的问题都踩坑了一遍，可以参考

js打印页面局部某个class并保存为pdf文件

0. 前提

1. 导出成pdf

猜你喜欢