将vue页面导出为PDF

下载两个插件

npm install --save html2canvas

npm install jspdf --save

创建一个js文件 jspdf.js 我习惯放在assets/js/jspdf.js  (下面是代码)

import html2Canvas from 'html2canvas'

import JsPDF from 'jspdf'

export default {

    install(Vue, options) {

        Vue.prototype.getPdf = function () {

            var title = this.htmlTitle

            html2Canvas(document.querySelector('#pdfDom'), {

                allowTaint: true

            }).then(function (canvas) {

                console.log(canvas.height, 'canvas.height');

                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 "./assets/js/jspdf"

Vue.use(htmlToPdf)

在需要用到导出功能的页面直接调用getPdf()方法就可以了

给需要导出的页面内容的最外层元素设置class="row" id="pdfDom"

vue 页面

<template>

  <div class="DataResearchReport" id="DataResearchReport">

    <div>

      <ul class="row" id="pdfDom"></ul>

      <el-button

        size="medium"

        type="button"

        class="btn btn-primary"

        style="position: fixed; top: 20vh; left: 54vw"

        @click="getPdf()"

        >导出PDF</el-button

      >

    </div>

  </div>

</template>

<script>

export default {

  name: "DataResearchReport",

  data() {

    return {

      htmlTitle: "日志",

    };

  },

  methods: {},

};

</script>

<style lang="less" scoped>

.DataResearchReport {

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;

  div {

    position: relative;

    width: 43vw;

    // height: 36rem;

    // border: 1px solid red;

    padding: 0;

  }

  .row {

    margin-top: 0;

    margin-left: -1rem;

    list-style: none;

    color: #00d8fe;

    width: 50rem;

    height: 220vh;

    padding: 0.5rem;

    // border: 1px solid red;

    background: #000000;

    // overflow-y: auto;

    overflow-x: hidden;

  }

}

</style>