前端实现HTML转PDF下载的两种方式

一、使用html2canvas和jspdf插件实现—导出pdf格式

1.下载插件模块

npm install html2canvas jspdf --save

2.assets下js中创建htmlToPdf.js文件

// 导出页面为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('.img'), {
        // allowTaint: true
        useCORS: 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')
        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')
      })
    }
  }
}

3.全局引入实现方法

在项目主文件main.js中引入定义好的实现方法，并注册。

import htmlToPdf from '@/components/utils/htmlToPdf'
// 使用Vue.use()方法就会调用工具方法中的install方法
Vue.use(htmlToPdf)

4.代码如下

<template>
  <div class="img">
    <a>导出pdf格式</a>
    <el-table :data="tableData" style="width: 40%">
      <el-table-column prop="index" label="索引" width="180"></el-table-column>
      <el-table-column
        prop="nickName"
        label="标题"
        width="180"
      ></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
    </el-table>
    <el-button type="primary" size="small" @click="getPdf('#pdfDom')">
      点击下载
    </el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { index: '1', nickName: '沙滩搁浅我们的旧时光', name: '小明' },
        { index: '2', nickName: '女人天生高贵', name: '小红' },
        { index: '3', nickName: '海是彩色的灰尘', name: '小兰' }
      ],
      htmlTitle: '页面导出PDF文件名'
    }
  }
}
</script>

<style lang="scss">
a {
  color: pink;
  font-size: 36px;
}
</style>

链接: https://blog.csdn.net/z591102/article/details/105530368/.

二、使用html2canvas—导出jpg格式

1.下载插件模块

npm install html2canvas jspdf --save

2.代码如下

<template>
  <div id="img">
    <a>导出jpg格式----jpg可以缩放版本</a>
    <el-table :data="tableData" style="width: 40%">
      <el-table-column prop="index" label="索引" width="180"></el-table-column>
      <el-table-column
        prop="nickName"
        label="标题"
        width="180"
      ></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
    </el-table>
    <el-button type="primary" size="small" @click="downImg('img', true)">
      点击下载
    </el-button>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
export default {
  data() {
    return {
      tableData: [
        { index: '1', nickName: '沙滩搁浅我们的旧时光', name: '小明' },
        { index: '2', nickName: '女人天生高贵', name: '小红' },
        { index: '3', nickName: '海是彩色的灰尘', name: '小兰' }
      ]
    }
  },
  methods: {
    downImg(demoId, isDownImg) {
      //demoId导出图片区域的id，isDownImg是否是下载图片
      return new Promise((resolve, reject) => {
        //创建一个新的canvas
        this.exportImgNum = 0 //需要生成的图片字节码个数
        let imgBlob = ''
        this.$nextTick(() => {
          var canvas2 = document.createElement('canvas')
          let _canvas = document.querySelector('#' + demoId)
          var width = parseInt(window.getComputedStyle(_canvas).width)
          var height = parseInt(window.getComputedStyle(_canvas).height)
          //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
          canvas2.width = width * 2
          canvas2.height = height * 2
          const content = canvas2.getContext('2d')
          content.scale(2, 2)
          let _that = this
          html2canvas(document.querySelector('#' + demoId), {
            allowTaint: true,
            taintTest: true,
            useCORS: true,
            scale: 2 / 2,
            canvas: canvas2,
            width: width,
            height: height
          }).then(function(canvas) {
            //document.body.appendChild(canvas);
            //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
            if (navigator.msSaveBlob) {
              // IE10+
              let blob = canvas.msToBlob()
              if (isDownImg) {
                //如果是下载图片则下载
                return navigator.msSaveBlob(blob, demoId + '.jpg')
              } else {
                //如果不是下载图片则返回图片字节码
                _that.exportImgNum++ //需要生成的图片字节码个数+1
                imgBlob = blob
              }
            } else {
              function dataURIToBlob(dataURI, callback) {
                var binStr = atob(dataURI.split(',')[1]),
                  len = binStr.length,
                  arr = new Uint8Array(len)

                for (var i = 0; i < len; i++) {
                  arr[i] = binStr.charCodeAt(i)
                }
                if (isDownImg) {
                  //如果是下载图片则下载
                  callback(new Blob([arr]))
                } else {
                  //如果不是下载图片则返回图片字节码
                  _that.exportImgNum++ //需要生成的图片字节码个数+1
                  imgBlob = dataURI.split(',')[1]
                }
              }
              var callback = function(blob) {
                var link = document.createElement('a')
                link.href = URL.createObjectURL(blob)
                link.download = demoId + '.jpg'
                document.body.appendChild(link)
                link.click()
              }

              dataURIToBlob(canvas.toDataURL(), callback)
            }
            resolve(imgBlob)
          })
        })
      })
    },
    async getDownImgBlob(demoId, isDownImg) {
      let imgBlob = await this.downImg(demoId, isDownImg)
      return imgBlob
    }
  }
}
</script>

<style lang="scss">
a {
  color: pink;
  font-size: 36px;
}
</style>