vue项目 将html生成pdf和word

1，生成pdf

 1，npm install html2canvas -S

2，npm install jspdf --save

然后在生成页面引入文件

import html2canvas from 'html2canvas'

import jsPDF from 'jspdf'

 在点击按钮页面

  markPDF() {

      document.getElementById('exportHtml').style.height = 'auto'

      // 下面的"print"为需要导出内容的id(把想导出的html内容用div包起来，加上id="print"即可)

      html2canvas(document.getElementById('exportHtml'), { allowTaint: true,

        height: document.getElementById('exportHtml').scrollHeight,

        windowHeight: document.getElementById('exportHtml').scrollHeight }).then(function(canvas) {

        // 此时这个canvas即选中的需要转换的html的canvas形式

        // document.body.appendChild(canvas); // 这句的意思是把canvas内容再加在当前页面内容的后面

        var url = canvas.toDataURL()

        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,595.28]，html页面生成的canvas在pdf中图片的宽高

        var imgWidth = 595.28

        var imgHeight = (592.28 / contentWidth) * contentHeight

        var pdf = jsPDF('', 'pt', 'a4')

        if (leftHeight < pageHeight) {

          pdf.addImage(url, 'JPEG', 0, 0, imgWidth, imgHeight)

        } else {

          // 分页

          while (leftHeight > 0) {

            pdf.addImage(url, 'JPEG', 0, position, imgWidth, imgHeight)

            leftHeight -= pageHeight

            position -= 841.89

            // 避免添加空白页

            if (leftHeight > 0) {

              pdf.addPage()

            }

          }

        }

        pdf.save('周报.pdf')

        document.getElementById('exportHtml').style.height = '720px'

      })

    },

 

2，生成word 

1，npm install file-saver --save

2，npm install html-docx-js --save

然后在生成页面引入 

import { saveAs } from 'file-saver'

import htmlDocx from 'html-docx-js/dist/html-docx'

 markWord() {

      const htmlStr = this.content

      saveAs(

        htmlDocx.asBlob(htmlStr, { orientation: 'landscape' }), '文件名.docx'

        // '问卷调查.doc'

      ) // 导出为word

    },