1. Vue 中下载当前网页为pdf

1.下载插件

yarn add   jspdf

yarn add   html2canvas

//htmlToPdf.js


import html2canvas from 'html2canvas'

import JSPDF from 'jspdf'

export default {

    install(Vue, options) {
        Vue.prototype.ExportSavePdf = function (htmlTitle, currentTime,currentTag) {
            var element = document.getElementById(currentTag);
            console.log(element);
            setTimeout(() =>{
                html2canvas(element,{
                    logging: false,
                    useCORS: true

                }).then(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 = 550.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(htmlTitle+currentTime);
                });
            }, 0);

        }
    }
}

//main.js

import htmlToPdf from './assets/static/js/htmlToPdf'
Vue.use(htmlToPdf);

//Vue.js使用

<template>
<el-button class="el-icon-download" type="primary" @click="dowloadPage()">下载并保存</el-button>

</template>

<script>
//使用时间插件
import moment from 'moment'

 methods:{
            //下载当前页面的内容
            dowloadPage( ){
                let currentTime=moment(new Date()).format('YYYY-MM-DD');
                //注意当点击下载pdf按钮时必须将页面置顶，才可以从头到尾，将网页打印成canvase,以pdf下载下来
                window.scrollTo(0, 0);
                //第一个参数是传的名称，第三个参数是传递所打印下来的id标签名
                this.ExportSavePdf('多元智能测试报告',currentTime,'dYZnTestSYCP');

            },
}
<script>