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

转换内容为 html 文件获取要导出组件页面的html的 dom元素代码Dom.js 文件中，相关获取 dom 元素的方法get html() {const temp = ['<!doctype html>','<html>','<head>',this._window.document.head.innerHTML,'</head>','<b

风如也

6398人浏览 · 2021-08-03 11:06:40

风如也 · 2021-08-03 11:06:40 发布

转换内容为 html 文件

获取要导出组件页面的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('')
}

构造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

先看一下效果
在这里插入图片描述
出来的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()
      })
    })
  }

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^