JS前端生成pdf文件和excel文件

生成pdf文件：

使用html2canvas和jspdf插件
详情：
jspdf
html2canvas
通过下面指令安装或者使用CDN

npm install --save html2canvas jspdf

然后分别引入

import html2canvas from 'html2canvas'
import JsPdf from 'jspdf'

先通过html2canvas将DOM元素整个截图生成Canvas，然后在通过jspdf将canvas的生成的图片（Base64编码）转成pdf格式导出
tip: 如果发现导出的pdf不清晰，可以使用设置option来改变canvas的大小,如下面的{scale:5}，当然文件的大小也会随之变大

tableToPdf () {
      html2canvas(document.querySelector('#table')，{scale:5}).then(canvas => {
        this.createPDFObject(canvas.toDataURL('image/jpeg')) //	使用toDataURL转化为Base64编码
      })
 },
createPDFObject (imgData) {
      let doc = new JsPdf('p', 'pt', 'a4') //	参数：纵向横向选择：'p'纵向，'l'横向，第二个单位，第三个尺寸格式，如[200,300]，可以也直接写'a4'等标准纸张大小
      doc.addImage(imgData, 0, 0, 595, 841, 'img')  //	参数：图片内容，左偏移，上偏移，宽度，高度，a4大小的宽高为595.28，841.89
      doc.save('表格.pdf') // 参数：导出文件的命名
}

tip: jspdf是不支持中文的，如果需要加入中文文本(不是图片)，可以考虑makePdf插件

生成excel文件:使用xlsx插件：

npm install xlsx --save

导入

 import * as XLSX from 'xlsx'
 import { saveAs } from 'file-saver'

exportToExcel () {
      let et = XLSX.utils.table_to_book(document.querySelector('#table')) // 此处传入table的DOM节点
      let etout = XLSX.write(et, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        saveAs(new Blob([etout], {
          type: 'application/octet-stream'
        }), 'trade-publish.xlsx') // trade-publish.xlsx 为导出的文件名
      } catch (e) {
        console.log(e, etout)
      }
      return etout
    },

生成excel文件（.csv）：

参考：https://blog.csdn.net/hhzzcc_/article/details/80419396

 tableToExcel () {
    //  要导出的json数据
    const jsonData = [
       {
         name: '路人甲',
         phone: '123456789',
         email: '[email protected]'
       },
       {
         name: '炮灰乙',
         phone: '123456789',
         email: '[email protected]'
       },
       {
         name: '土匪丙',
         phone: '123456789',
         email: '[email protected]'
       }
     ]
     //  列标题，逗号隔开，每一个逗号就是隔开一个单元格
     let str = `姓名,电话,邮箱\n`
     //  增加\t为了不让表格显示科学计数法或者其他格式
     for (let i = 0; i < jsonData.length; i++) {
       for (let item in jsonData[i]) {
         str += `${jsonData[i][item] + '\t'},`
       }
       str += '\n'
     }
     //  encodeURIComponent解决中文乱码
     let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str)
     //  浏览器如果识别a标签的路径是个文件，将会自动下载该文件
     let link = document.createElement('a') 
     link.href = uri
     //  对下载的文件命名
     link.download = '数据表.csv'
     document.body.appendChild(link)
     link.click()
     document.body.removeChild(link)
   }

先将JSON数据连成字符串str并组成excel的格式，然后进行‘text/csv’转码，因为csv文件是以纯文本形式存储表格数据（数字和文本），所以会按str字符串生成csv文件

打印页面内容

 printContent () {
      let wpt = document.querySelector('#table')
      let newContent = wpt.innerHTML
      let oldContent = document.body.innerHTML
      document.body.innerHTML = newContent
      window.print() //  打印方法
      window.location.reload()
      document.body.innerHTML = oldContent
    },