vue中将页面导出为.pdf和.html

介绍

如果项目中包含报表业务，通常都会有导出功能。根据不同需求导出为不同格式导出，有PDF、Excel、Word格式等…当然，导出的方法也有很多，一般都是后端导出前端直接点击下载即可，但是是不是前端就不能实现导出功能呢，也不是。这里，就在vue项目中使用已有的依赖包来实现导出功能。

导出为.PDF

// step 1: 安装所需依赖包
npm i html2canvas jspdf

// step 2: 
import Html2Canvas from 'html2canvas'
import JsPdf from 'jspdf'

const pageToPdf = (id, name) => {
	Html2Canvas(document.getElementById(id).getElementsByClassName('el-scrollbar__view')[0], {
    allowTaint: true,
    taintTest: false,
    height: document.getElementById(id).getElementsByClassName('el-scrollbar__view')[0].scrollHeight,
    width: document.getElementById(id).getElementsByClassName('el-scrollbar__view')[0].scrollWidth // 为了使横向滚动条的内容全部展示，这里必须指定
  }).then(canvas => {
    let contentWidth = canvas.width
    let contentHeight = canvas.height
    let pageHeight = contentWidth / 555.28 * 841.89
    let leftHeight = contentHeight
    let position = 12
    let imgWidth = 555.28
    let imgHeight = 555.28 / contentWidth * contentHeight
    let pageData = canvas.toDataURL('image/jpeg', 1.0)
    let PDF = new JsPdf('', 'pt', 'a4')
    if (leftHeight < pageHeight) {
      PDF.addImage(pageData, 'PNG', 20, 0, imgWidth, imgHeight)
    } else {
      while (leftHeight > 0) {
        PDF.addImage(pageData, 'PNG', 20, position, imgWidth, imgHeight)
        leftHeight -= pageHeight
        position -= 841.89
        if (leftHeight > 0) {
          PDF.addPage()
        }
      }
    }
    PDF.save(name + '.pdf')
  })
}

这里需要注意几点：

• document.getElementById(id).getElementsByClassName('el-scrollbar__view')[0]根据不同页面DOM元素也不同，因为这里页面会很长，所以加了elementUI的el-scrollbar组件，所以真正需要导出的页面内容是这个元素里面的内容
• 参数name是导出后文件的名称

导出为.html

// step 1: 安装依赖
npm i html2canvas

// step 2: 
import Html2Canvas from 'html2canvas'
const pageToHtml = (id, name) => {
	Html2Canvas(document.getElementById(id).getElementsByClassName('el-scrollbar__view')[0], {
    allowTaint: true,
    taintTest: false,
    height: document.getElementById(id).getElementsByClassName('el-scrollbar__view')[0].scrollHeight,
    width: document.getElementById(id).getElementsByClassName('el-scrollbar__view')[0].scrollWidth // 为了使横向滚动条的内容全部展示，这里必须指定
  }).then(canvas => {
    let pageData = canvas.toDataURL('image/jpeg', 1.0)
    let html = `
                
                
                    
                    
                    
                
                
                    

                      ${pageData} />
                    
                
                `
    let eleLink = document.createElement('a')
    eleLink.style.display = 'none'
    let blob = new Blob([html])
    let url = URL.createObjectURL(blob, {type: 'text/plain;charset=utf-8'})
    eleLink.href = url
    eleLink.download = name + '.html'
    document.body.appendChild(eleLink)
    eleLink.click()
    document.body.removeChild(eleLink)
  })
}

这里的原理其实跟导出为PDF差不多，上面是转成图片后再转成了PDF，但是这里直接将转成的图片插入到一个新建的HTML页面中。所以，虽然下载后的文件确实是.html格式，但是如果你打开控制台就会发现，其实就是一个标准的html文档中插入了一个图片而已。

Conclusion

实践后就会发现，我们导出的都只是我们页面能看到的内容，如果导出的PDF需求是需要标准的PDF文档格式，包括页眉页脚这些内容的话，那就…让后台同事去做吧，你就在页面中安装个按钮直接下载就行了，至于他们怎么实现，我就不知道啦…