Vue如何实现导出页面为PDF

导语前两天接到一个需求，就是将Vue编写的页面导出成一个PDF的页面，在网上找了很久找到了如下的解决方案

第一步

首先安装如下的两个插件

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

安装完插件之后，使用如下的方式进行导入操作。

第二步

导入完成之后，开始编写需要进行操作的Vue页面，如下,当然其中页面只是为了参考，读者可以通过自己编写的页面来进行测试

<template>
  <div id="gz_app"  class="app-container">
    <img id="gz" src="@/assets/gz/gz1.png"  v-drag >
    <el-form>
      <el-form-item>
        <el-input>工会管理办公室</el-input>
      </el-form-item>
    </el-form>
    <button type="button" class="btn btn-primary" v-on:click="getPdf()">导出PDF</button>
  </div>
</template>
<style>
  #app{
    /*width: 1200px;*/
    /*height: 800px;*/
    /*position: relative;*/
    /*border: 1px red solid;*/
  }
  #gz{
    position: relative;     /*定位*/
    top: 10px;
    left: 10px;
    width: 200px;
    height: 200px;
    cursor: pointer;

  }
</style>
<script>


  export default {
    name: 'gz',
    data () {
      return {
        htmlTitle: '页面导出PDF文件名'
      }
    },
    directives: {
      drag: {
        // 指令的定义
        bind: function (el) {
          let odiv = el;   //获取当前元素
          odiv.onmousedown = () => {

            //算出鼠标相对元素的位置
            // let disX = e.clientX; //- odiv.offsetLeft;
            // let disY = e.clientY; //- odiv.offsetTop;

            document.onmousemove = (e)=>{
              //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
              let left = e.clientX-300 /*- disX*/;
              let top = e.clientY-300 /*- disY*/;

              //绑定元素位置到positionX和positionY上面
              //this.positionX = top;
              // this.positionY = left;


              //移动当前元素
              odiv.style.left = left + 'px';
              odiv.style.top = top + 'px';
            };
            document.onmouseup = () => {
              document.onmousemove = null;
              document.onmouseup = null;
            };
          };
        }
      }
    }
  }
</script>

<style>
  #gz {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

第三步

编写完成之后，开始使用两个插件进行导出操作。

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

export default {
  install (Vue, options) {
    Vue.prototype.getPdf = function () {
      var title = this.htmlTitle
      html2Canvas(document.querySelector('#gz_app'), {
        allowTaint: true
      }).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')
        console.log(contentWidth)
        console.log(contentHeight)
        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 '@/components/utils/htmlToPdf'
Vue.use(htmlToPdf)