html2canvas+jspdf导出PDF 2个版本

jsPDF+html2canvas实现html导出PDF和打印

html版本
  • 引入html2canvas.min.js和html2canvas.min.js

    <script src="path/html2canvas.min.js"></script>
    <script src="path/jspdf.debug.js"></script>
    
  • 导出核心代码

    /**
     * 导出/下载方法
     *
     * @param fileName 文件名称
     * @param target 导出的dom元素
     * @param isDownloadOrPrint true下载/false打印
     */
    function download_html_pdf(fileName,target,isDownloadOrPrint){
        let paddingLR = 20;//左右边距
        let paddingTop = 20;//第一页上边距
        const index = layer.msg('开始生成PDF中...请稍后!', {
            icon: 16
            , shade: 0.01
            , time: false
        });
        fileName +=".pdf"
    
        // 解决背景黑色问题,根据业务需要处理要导出的dom元素样式
        $(target).css({'background':'#FFFFFF'})
        //  转PDF
        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-paddingLR;
                var imgHeight = (592.28-paddingLR)/contentWidth * contentHeight;
                var pageData = canvas.toDataURL('image/jpeg', 1.0);
                //  l表示横版,p:纵向 (默认纵向)
                var pdf = new jsPDF('', 'pt', 'a4');
                //  有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
                //  当内容未超过pdf一页显示的范围,无需分页
                if (leftHeight < pageHeight) {
                  pdf.addImage(pageData,'JPEG',paddingLR,paddingTop,imgWidth,imgHeight);
                } else {
                    while (leftHeight > 0) {
                      pdf.addImage(pageData, 'JPEG', paddingLR, position+paddingTop, imgWidth, imgHeight);
                        leftHeight -= pageHeight;
                        position -= 841.89;
                        //避免添加空白页
                        if (leftHeight > 0) {
                            pdf.addPage();
                        }
                    }
                }
                // 1.本地下载
              	// 由于业务需要 保存成功需要跳转页面
                new Promise(function (resolve, reject){
                    if (isDownloadOrPrint == 'true'){
                        pdf.save(fileName)
                        resolve()
                    }else {
                        const link = window.URL.createObjectURL(pdf.output('blob'));
                        let myWindow = window.open(link);
                        myWindow.print();
                        resolve()
                    }
                }).then(function (){
                    window.history.go(-1)
                })
    
            }
        })
        layer.close(index)
    }
    
    
VUe版本
  • 安装依赖

    npm install html2canvas
    npm install jspdf
    
  • 创建文件exportPdf.js,内容如下

    // 导出页面为PDF格式
    import html2Canvas from 'html2canvas'
    import JsPDF from 'jspdf'
    export default {
        install(Vue, options) {
            Vue.prototype.getPdf = function (name, id) {
                let title = name || 'index'
                html2Canvas(document.querySelector(`#${id}`), {
                    allowTaint: true,
                    taintTest: false,
                    useCORS: true,
                    dpi: window.devicePixelRatio*4, //将分辨率提高到特定的DPI 提高四倍
                    scale:4 //按比例增加分辨率
                }).then(function (canvas) {
                    let contentWidth = canvas.width
                    let contentHeight = canvas.height
                    let pageHeight = contentWidth / 592.28 * 841.89
                    let leftHeight = contentHeight
                    let position = 0
                    let imgWidth = 595.28
                    let imgHeight = 592.28 / contentWidth * contentHeight
                    let pageData = canvas.toDataURL('image/jpeg', 1.0)
                    let PDF = new JsPDF('', 'pt', 'a4')
                    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(title + '.pdf')
                }
                )
            }
        }
    }
    
  • main.js全局引入,也可以按需局部引入

    import htmlToPdf from '@/utils/exportPdf' // 创建的exportPdf.js路径 按需修改
    Vue.use(htmlToPdf)
    
  • 使用

    // arg1 导出的文件名称  arg2 dom节点id
    this.getPdf('filename', "pdfDom");
    

    参考:地址

你可能感兴趣的:(pdf,javascript,前端)