vue页面导出pdf，预览并下载（pc端）

                         vue页面导出pdf，预览并下载（pc端）

Vue前端HTML保存为PDF常用方式有两种。
一，使用html2Canvas和JsPDF库，转化为图片后保存PDF。
二，调用浏览器window.print()，然后手动保存为PDF。

第一种

优点

• 没有预览点击即可保存
• 不需要手动配置保存
• 可选取部分Dom保存

缺点

• 较不清晰
• 需要先转化为图片
• 没有提前预览
• 不适合保存过长分页内容
• 依赖html2Canvas和JsPDF库

第二种

优点

• 可以提前预览
• 适合保存过长分页内容比较合适
• 直接由浏览器API保存，内容清晰
• 开发便利快速。

缺点

• 第一次需要在预览框手动配置参数
• 需要手动点击保存
• 会有Print预览弹窗
• 不可选取部分Dome，只能保存当前整页面。

一，终端输入命令，添加两个npm

第一个.将页面html转换成图片
npm install --save html2canvas 
第二个.将图片生成pdf
npm install jspdf --save

二，定义全局函数..创建一个htmlToPdf.js文件在指定位置.我个人习惯放在('src/components/utils/htmlToPdf')， getPdf方法和pdfExport方法可以任意使用。正常来写应该使用 PDF.save(title + '.pdf')来进行打印下载，PDF.save(title + '.pdf')下面的代码是使用移动端的时候才加上的，光是pc端可以恢复这行代码，干掉下面的代码。

/**
    path: src/utils/htmlToPdf.js
    name: 导出页面为PDF格式
**/
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

const htmlToPdf = {
//  pdfExport() {
//              var mainRight = document.getElementById('mainRight');
//              html2canvas(mainRight, {
//                allowTaint: true,
//                scale: 2, // 提升画面质量，但是会增加文件大小
//              }).then(function(canvas) {
    
//    var contentWidth = canvas.width;
//    var contentHeight = canvas.height;
    
//    var pageData = canvas.toDataURL('image/jpeg', 0.4);
    
//    var pdfWidth = (contentWidth + 10) / 2 * 0.75;
//    var pdfHeight = (contentHeight + 200) / 2 * 0.75; // 500为底部留白
    
//    var imgWidth = pdfWidth;
//    var imgHeight = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离
    
//    var pdf = new jsPDF('', 'pt', [pdfWidth, pdfHeight]);
//    pdf.addImage(pageData, 'jpeg', 0, 0, imgWidth, imgHeight);
//    pdf.save('report_pdf_' + new Date().getTime() + '.pdf');
//  });  }
    getPdf(title) {
        html2Canvas(document.querySelector('#pdfDom'), {
            allowTaint: true,
        }).then(canvas=>{
            //内容的宽度
            let contentWidth = canvas.width;
            //内容高度
            let contentHeight = canvas.height;
            //一页pdf显示html页面生成的canvas高度,a4纸的尺寸[595.28,841.89];
            let pageHeight = contentWidth / 592.28 * 841.89;
            //未生成pdf的html页面高度
            let leftHeight = contentHeight;
            //页面偏移
            let position = 0;
            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
            let imgWidth = 595.28;
            let imgHeight = 841.89 / contentWidth * contentHeight;
            // let imgHeight = 592.28 / contentWidth * contentHeight;
            //canvas转图片数据
            let pageData = canvas.toDataURL('image/jpeg', 1.0);
            //新建JsPDF对象
            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')
            
             var _this=this
             //转成base64
             let pdf64 = PDF.output("datauristring");
             //base64转成blob文件
             let path = _this.createDownloadFile("报表", pdf64);
             //上传到服务器
             let formdata = new FormData();
             //第三个参数传一个不一定会用到的文件名，但是得有。注意后缀
             formdata.append("file", path, "报表.pdf");
            //调上传接口，这里因为我封装了axios增加了拦截器，所以是下面的写法，这里根据各位的上传方法不同，自行修改
             request({
                        url: _this.url + _this.curVersion + "/SysFile/uploadImg",
                        method: "post",
                        data: formdata,
                      }).then((res) => {
            //拼接文件线上地址
                        let path =
                          _this.url + res.data.data.filePath + res.data.data.fileName;
            //调用安卓或者ios提供的方法，打开浏览器
                        Android.openBrowser(path);
              });
              
        })
    }
};

export default htmlToPdf;

三，在main.js中使用我们定义的函数文件，定义全局。

import htmlToPdf from '@/components/utils/htmlToPdf'
Vue.use(htmlToPdf)

这里开始分两种方式进行，@click="pdfBtn"是点击pdf的事件，id="pdfDom"的div中就是打印的内容，所有内容要写在这个div里。

第一种：html2Canvas和JsPDF库

第二种：window.print()

打印的css，在点击按钮生成pdf时，打印页面会生成这些样式

@media print{
打印页面样式
        .noprint{
            display: none;
        }
        .Front{
            background-color: white;
            background: url(../assets/beijng.jpg);
            background-size:100% 100%;
        }
        .buttonNoPrint{  
            display:none;  
        }  
        .Header{
            display:none; 
        }
        .Headers{
            display:none; 
        }
        body{
            -webkit-print-color-adjust:exact;
            -moz-print-color-adjust:exact;
            -ms-print-color-adjust:exact;
            print-color-adjust:exact;
        } 
        #pdfDom{
            /* width: 1078px;
            height: 1568px;
            height: 7200px;
             border: 1px #000 solid; */
            border-bottom: white;
            margin: 0 auto;
            /* margin-left: 1%;
            margin-top: 1%; */
        }

配置页眉页脚的边距，宽度
        @page{
             size: auto !important; 
             /* margin: 3mm !important; */
             margin: 1.5em 1.5em 1.5em
        }
    }