vue前端使用html2canvas、 jspdf插件导出pdf文件

最新推荐文章于 2024-07-18 15:24:52 发布

猫七姑娘 °

最新推荐文章于 2024-07-18 15:24:52 发布

阅读量346

点赞数

文章标签：前端 vue.js pdf javascript

本文链接：https://blog.csdn.net/qq_44997933/article/details/130995130

版权

该文章详细介绍了如何使用JavaScript库jspdf、html2canvas和autotable将网页内容转换并导出为PDF文件。它涉及到获取指定div内容，将其转换为Canvas，然后分割和绘制到多页PDF中的过程。

摘要由CSDN通过智能技术生成

引用的js文件

<!--pdf文件导出-->
<script src="/XXX/bluebird.js"></script>
<script src="/XXX/jspdf.debug.js"></script>
<script src="/XXX/jspdf.plugin.autotable.js"></script>
<script src="/XXX/html2canvas.min.js"></script>

文件内容上传到了压缩包里面，解压即可。

html添加导出按钮

<i-button size="small" @click="downloadPdf">导出pdf</i-button>

html导出指定区域内容（div标签绑定id值）

 <div id="test" >
    ...导出的内容
 </div>

pdf导出方法

 downloadPdf() {
                let that = this;
                // 获取表格元素(导出指定区域内容)
                var table = document.querySelector("#test");
                // 使用html2canvas将表格转换为Canvas图像
                html2canvas(table, {
                    scale:1,
                    height: table.scrollHeight,//canvas高
                    width: table.scrollWidth,//canvas宽
                    allowTaint: true,
                    useCORS: true,
                    dpi: 120, // 图片清晰度问题
                    background: '#FFFFFF', //如果指定的div没有设置背景色会默认成黑色,这里是个坑
                }).then(canvas => {
                    var leftHeight = canvas.height;
                    // var a4Width = 595.28;
                    // var a4Height = 841.89; //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
                    // 我这边自己调整了宽高
                    var a4Width = 842;
                    var a4Height = 1417;
                    //一页pdf显示html页面生成的canvas高度;
                    var a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height)
                    //pdf页面偏移
                    var position = 0;
                    var pageData = canvas.toDataURL('image/jpeg', 1.0);
                    // var pdf = new jsPDF('p', 'pt', 'a4'); //A4纸，纵向
                    var pdf = new jsPDF({
                        orientation: 'p', // p/portrait:竖着, l/landscape:横着（打印横向、纵向配置）
                        unit: 'pt', // 单位: "pt", "mm", "cm", "m", "in" or "px".
                        // format: 'a4',  // string 'a4' or [width,height]
                        format: [1417, 842], // 210mm×297mm a4纸张大小
                        margins: [20, 20, 20, 20]
                    });
                    var index = 1,
                        canvas1 = document.createElement('canvas'),
                        height;
                    pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen');
                    var pdfName = '测试';
                    function createImpl(canvas) {
                        if (leftHeight > 0) {
                            index++;
                            var checkCount = 0;
                            if (leftHeight > a4HeightRef) {
                                var i = position + a4HeightRef;
                                for (i = position + a4HeightRef; i >= position; i--) {
                                    var isWrite = true;
                                    for (var j = 0; j < canvas.width; j++) {
                                        var c = canvas.getContext('2d').getImageData(j, i, 1, 1).data;

                                        if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {
                                            isWrite = false;
                                            break;
                                        }
                                    }
                                    if (isWrite) {
                                        checkCount++;
                                        if (checkCount >= 10) {
                                            break
                                        }
                                    } else {
                                        checkCount = 0
                                    }
                                }
                                height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef);
                                if (height <= 0) {
                                    height = a4HeightRef;
                                }
                            } else {
                                height = leftHeight;
                            }
                            canvas1.width = canvas.width;
                            canvas1.height = height;
                            var ctx = canvas1.getContext('2d');
                            ctx.drawImage(
                                canvas,
                                0,
                                position,
                                canvas.width,
                                height,
                                0,
                                0,
                                canvas.width,
                                height,
                            );
                            var pageHeight = Math.round((a4Width / canvas.width) * height);
                            if (position != 0) {
                                pdf.addPage();
                            }
                            pdf.addImage(
                                canvas1.toDataURL('image/jpeg', 1.0),
                                'JPEG',
                                10,
                                10,
                                a4Width,
                                (a4Width / canvas1.width) * height,
                            );
                            leftHeight -= height;
                            position += height;
                            if (leftHeight > 0) {
                                setTimeout(createImpl, 500, canvas)
                            } else {
                               // 导出pdf文件
                                pdf.save(pdfName + '.pdf');
                                //  转base64
                                let buffer = pdf.output("datauristring");
                                let file = that.convertBase64ToFile(buffer, that.title);
                            }
                        }
                    }
                    //当内容未超过pdf一页显示的范围，无需分页
                    if (leftHeight < a4HeightRef) {
                        pdf.addImage(
                            pageData,
                            'JPEG',
                            0,
                            0,
                            a4Width,
                            (a4Width / canvas.width) * leftHeight,
                        );
                        // 导出pdf文件
                        pdf.save(pdfName + '.pdf');
                        //  转base64
                        let buffer = pdf.output("datauristring");
                        let file = that.convertBase64ToFile(buffer, that.title);
                    } else {
                        try {
                            pdf.deletePage(0);
                            setTimeout(createImpl, 500, canvas)
                        } catch (err) {
                            // console.log(err);
                        }
                    }
                });

            /**
             * base64转文件
             * @param urlData 数据
             * @param filename 文件名
             * @returns {*}
             */
            convertBase64ToFile(urlData, filename) {
                var arr = urlData.split('base64,');
                var type = arr[0].match(/:(.*?);/)[1];
                var fileExt = type.split('/')[1];
                var bstr = atob(arr[1]);
                var n = bstr.length;
                var u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new File([u8arr], filename + "." + fileExt, {
                    type: type
                });
            },