描述

通过传入 Dom 节点或 css 选择器，导出 pdf。
感谢 由黄金苏同学提供。👏👏👏

⚠️ 警告

使用该方法，是依赖 html2canvas (opens new window) 和 jspdf (opens new window) 这两个库。 在本 utils 工具库中默认没有安装，需要使用者在自己的项目中安装。
我们推荐版本 html2canvas@1.4.0 jspdf@2.3.0

1.依赖 html2canvas 和 jspdf 库安装

yarn add html2canvas@1.4.0 jspdf@2.3.0

npm i html2canvas@1.4.0 jspdf@2.3.0

// Make sure to add code blocks to your code group

2.示例

导出pdf

<template>
  <div ref="tableWrap">
    <el-table ref="singleTable" :data="tableData" highlight-current-row style="width: 100%">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column property="date" label="日期" width="120"> </el-table-column>
      <el-table-column property="name" label="姓名" width="120"> </el-table-column>
      <el-table-column property="address" label="地址"> </el-table-column>
    </el-table>
  </div>
  <div style="margin-top: 20px">
    <el-button @click="onExportPdf">导出pdf</el-button>
  </div>
</template>

<script>
import exportPdf from 'sf-utils2/lib/expand/exportPdf'
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      currentRow: null
    }
  },

  methods: {
    onExportPdf() {
      exportPdf(this.$refs.tableWrap, '例子')
    }
  }
}
</script>

显示代码 复制代码 复制代码

3.入参说明

参数	说明	类型	是否必填	默认值
target	目标元素，可以是 Dom 节点 也可以是 css 选择器	String HTMLHtmlElement	-	-
title	导出的文件名，不要加扩展名	String	-	-

4.源码

源码，点开查看 👈

import html2canvas from 'html2canvas'
import Jspdf from 'jspdf'
import isString from '@/base/isString'

/**
 * 导出页面为PDF格式，依赖【缺少 html2canvas库】：推荐版本1.4.0；依赖【缺少 jspdf库】：推荐版本2.3.0
 * @param {String | HTMLHtmlElement} target 目标元素
 * @param  {String }  title 导出的文件名
 * @returns {Promise<void>}
 */
async function exportPdf(target, title) {
  let _targetDom = target
  if (isString(target)) {
    _targetDom ||= document.querySelector(target)
  }
  if (!_targetDom) {
    throw new Error('【error】：传入的target 非正常的选择器或dom元素')
  }

  html2canvas(_targetDom, {
    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')
    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')
  })
}

export default exportPdf