vue中导出PDF和图片

1、安装：npm install html2canvas jspdf --save

2、创建：html2canvas.js 文件，内容如下：

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

/**
 * @param {String} title 文件名称（必选）
 * @param {Element} target Dom元素（必选）
 * @param {String} direction PDF纵向、横向，缺省时默认纵向
 * @return {Base64} 返回的PDF
 */

// 导出PDF
export function exportPDF(title, target, direction) {
 let element = target
 setTimeout(() => {
  html2Canvas(element).then(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, imgHeight
   if (direction == 'l') {
    // 横向
    imgWidth = 841.89
    imgHeight = (841.89 / contentWidth) * contentHeight
   } else {
    // 纵向
    imgWidth = 595.28
    imgHeight = (592.28 / contentWidth) * contentHeight
   }
   let pageData = canvas.toDataURL('image/jpeg', 1.0)
   let pdf = new JsPDF(direction, 'pt', 'a4')
   // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
   // 当内容未超过pdf一页显示的范围，无需进行分页
   if (leftHeight < pageHeight) {
    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
   } else {
    // 当内容超过pdf一页显示的高度范围时，进行分页
    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')
  })
 }, 1000)
}

/**
 * @param {String} title 文件名称（必选）
 * @param {Element} target Dom元素（必选）
 * @param {String} scale 放大倍数，缺省时值取4
 * @return {Base64} 返回image
 */

// 导出图片
export function exportImage(title, target, scale) {
 let element = target
 html2Canvas(element, {
  scale: scale || 4, // 放大倍数 越大越清晰 文件越大, 默认值：4
 }).then(canvas => {
  let imgDataSrc = canvas.toDataURL('image/png', 1.0)
  const $tag = document.createElement('a')
  $tag.setAttribute('download', title.replace(/\./g, '。'))
  $tag.href = imgDataSrc
  $tag.click()
 })
}

3、在组件中使用：

import { exportPDF, exportImage } from '../utils/html2canvas' // 引入

  // 导出PDF、Image
export_print(type) {
  let file_name = '测试导出' // 文件名
  let target_dom = document.getElementById('export_print') // 需要导出的dom元素
  if (type == 'export') {
   exportImage(file_name, target_dom) // 调用导出Image方法
  } else {
   // 滚动条置顶，避免截图不全，截图是从当前浏览器看的位置开始截取的
   window.pageYOffset = 0
   document.documentElement.scrollTop = 0
   document.body.scrollTop = 0
   exportPDF(file_name, target_dom, 'l') // 调用导出PDF方法
  }
}

ps：抄别人的，只拿来整合了一下。

原文1：https://blog.csdn.net/qq_63310300/article/details/124900662（导出PDF）

原文2：https://blog.csdn.net/zd1007129657/article/details/116598038（导出图片）