vue导出页面内容为html或pdf文件

迷南。 2022-09-02 11:53 393阅读 0赞

## 转换内容为 html 文件 ##

1.  获取要导出组件页面的html的 `dom`元素代码

`Dom.js` 文件中，相关获取 `dom` 元素的方法

get html() { 
      const temp = [
        '<!doctype html>',
        '<html>',
        '<head>',
        this._window.document.head.innerHTML,
        '</head>',
        '<body>',
        this._window.document.body.innerHTML,
        '</body>',
        '</html>'
      ]
      return temp.join('')
    }

1.  构造html页面，并使用 `createObjectURL`构造一个文件流并下载

import dom from '.../Dom.js'
    ...
    exportDom() { 
    	const link = document.createElement('a')
    	document.body.appendChild(link)
    	const url = URL.createObjectURL(new Blob([dom.html], {  type: "text/plain;charset='utf-8'" }))
    	link.href = url
    	link.download = name + '.html'
    	link.click()
    	window.URL.revokeObjectURL(url)
    }
    ...

## 转换内容为 pdf 文件 ##

需要先安装两个包

npm install html2canvas jspdf --save

先看一下效果  
![在这里插入图片描述][e8fdb486f8fc4bef9bfab4751f290210.png]  
出来的pdf文件如果分页的话衔接处就是这个样子，通过对jspdf的设置实现了pdf文件的分页，但文件的内容暂时没有能力进行分页。  
因为我们是先将我们需要进行打印的元素（比如id="pdfDom"的div）转换成canvas，canvas再转换成图片，再将图片放入pdf文件中。如果我们需要对内容进行分页，那我们就要获取div中全部元素的高度，然后进行判断等一系列操作…

### 方式1 ###

import html2Canvas from 'html2canvas'
    import JsPDF from 'jspdf'

getPdfAnother(id, title) { 
        let element = document.querySelector(`#${ id}`) // 这个dom元素是要导出pdf的div容器
        let w = element.offsetWidth // 获得该容器的宽
        let h = element.offsetWidth // 获得该容器的高
        let offsetTop = element.offsetTop // 获得该容器到文档顶部的距离
        let offsetLeft = element.offsetLeft // 获得该容器到文档最左的距离
        let canvas = document.createElement('canvas')
        let abs = 0
        let winI = document.body.clientWidth // 获得当前可视窗口的宽度（不包含滚动条）
        let winO = window.innerWidth // 获得当前窗口的宽度（包含滚动条）
        if (winO > winI) { 
          abs = (winO - winI) / 2 // 获得滚动条长度的一半
        }
        canvas.width = w * 2 // 将画布宽&&高放大两倍
        canvas.height = h * 2
        let context = canvas.getContext('2d')
        context.scale(2, 2)
        context.translate(-offsetLeft - abs, -offsetTop)
        // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
        // translate的时候，要把这个差值去掉
        html2Canvas(element, { 
          allowTaint: true, // 允许跨域
          useCORS: true, // 允许图片跨域
          scale: 2 // 提升画面质量，但是会增加文件大小
        }).then(function (canvas) { 
          let contentWidth = canvas.width
          let contentHeight = canvas.height
          // 一页pdf显示html页面生成的canvas高度;
          let pageHeight = contentWidth / 592.28 * 841.89
          // 未生成pdf的html页面高度
          let leftHeight = contentHeight
          // 页面偏移
          let position = 0
          // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
          let imgWidth = 595.28
          let imgHeight = 592.28 / contentWidth * contentHeight
    
          let pageData = canvas.toDataURL('image/jpeg', 1.0)
    
          let pdf = new JsPDF('', 'pt', 'a4')
    
          // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
          // 当内容未超过pdf一页显示的范围，无需分页
          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')
        })
      },
    // 调用
    this.getPdfAnother('main', name)

### 方式2 ###

getPdf(id, title) { 
       html2Canvas(document.querySelector(`#${ id}`), { 
         // allowTaint: true // 允许 canvas 污染，allowTaint 参数要去掉，否则是无法通过 toDataURL 导出 canvas 数据的
         dpi: 300,
         scale: 4, // 设置可以解决导出模糊的问题
         useCORS: true // 允许 canvas 画布内 可以跨域请求外部链接图片，允许跨域请求
       }).then(function (canvas) { 
         let contentWidth = canvas.width
         let contentHeight = canvas.height
         // 一页pdf显示html页面生成的canvas高度
         let pageHeight = contentWidth / 592.28 * 841.89
         // 未生成pdf的html页面高度
         let leftHeight = contentHeight
         // 页面偏移
         let position = 0
         // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
         let imgWidth = 595.28
         let imgHeight = 592.28 / contentWidth * contentHeight
         let pageData = canvas.toDataURL('image/jpeg', 1.0)
         let PDF = new JsPDF('', 'pt', 'a4')
         // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
         // 当内容未超过pdf一页显示的范围，无需分页
         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')
       })
     },
     // 调用
     this.getPdf('main', name)

方式1和方式2返回的都是一样的，看自己喜欢哪种方法

> 注意：`jsPDF` 打印成 `pdf` 文件时，注意设置打印区域 `dom`的背景色为白

### 方式3 ###

调用 `window.print()` 打开打印窗口，让用户自定义打印

print() { 
        return new Promise(resolve => { 
          wait(200).then(() => { 
            console.log('Ready to print')
            this._window.print()
            console.log('Print dialog closed')
            resolve()
          })
        })
      }

[e8fdb486f8fc4bef9bfab4751f290210.png]: /images/20220829/e5d86bb8eba245e6ada67bf96fadab6d.png