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

生成pdf文件:

使用html2canvasjspdf插件
详情:
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
    },

你可能感兴趣的:(学习总结)