Vue2/3导出PDF或图片

1、npm引入相应的包

npm i html2canvas -S
npm i jspdf -S // 导出图片无需安装jspdf

2、使用：引入封装的js，直接调用封装的方法并传入获取的dom和文件名字（封装好的方法见下文）

<div ref="exportPDF"></div> // 需要导出的dom
import exportPdf from '@utils/exportPDF' // 引入封装好的导出方法（见下文）

// Vue3写法直接使用ref获取dom
const exportPDF = ref(null)  // 通过ref获取dom
exportPdf(exportPDF.value, '排名列表统计') // 使用封装好的PDF方法

// Vue2写法通过this.$refs获取dom
let dom = this.$refs.exportPDF.$el
exportPdf(dom, '排名列表统计') // 使用封装好的PDF方法

/*
 * @Author: lzx
 * @Date: 2022-04-06 13:39:55
 * @LastEditors: lzx
 * @LastEditTime: 2022-04-06 14:51:34
 * @Description: Fuck Bug
 * @FilePath: \cs_talk_admin\src\utils\exportPDF.js
 */
/**
 * 封装导出PDF方法
 */
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export function exportPdf (dom, title) {
  html2Canvas(dom,{
      backgroundColor: "#ffffff", // 背景颜色
      dpi: 96, // 将分辨率提高到特定的dpi,默认值为96
      allowTaint: true, // 开启跨域
      useCORS: true, // 是否尝试使用CORS从服务器加载图像(跨域)
      scrollY: 0, // Y轴偏移
      scrollX: 0, // X轴偏移
      scale: 1, // 用于渲染的比例尺。默认为浏览器设备像素比率。默认值是1，手机端设置成2
    }).then((canvas) => {
    var contentWidth = canvas.width
    var contentHeight = canvas.height
    // 一页pdf显示html页面生成的canvas高度;
    var pageHeight = contentWidth
    // 未生成pdf的html页面高度
    var leftHeight = contentHeight
    // 页面偏移
    var position = 0
    // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    var imgWidth = 595.28
    var imgHeight = (592.28 / contentWidth) * contentHeight
    var pageData = canvas.toDataURL('image/jpeg', 1.0)
    var PDF = new JsPDF('', 'pt', 'a4')
    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') // 这里是导出的文件名
  })
}

/*
 * @Author: lzx
 * @Date: 2022-04-06 13:39:55
 * @LastEditors: lzx
 * @LastEditTime: 2022-04-06 13:39:55
 * @Description: Fuck Bug
 * @FilePath: \tree\src\utils\exportImg.js
 */
/**
 * 封装导出图片方法
 */
import html2Canvas from 'html2canvas'
export function exportImg (dom, title) {
  html2Canvas(dom,{
      backgroundColor: "#ffffff", // 背景颜色
      dpi: 96, // 将分辨率提高到特定的dpi,默认值为96
      allowTaint: true, // 开启跨域
      useCORS: true, // 是否尝试使用CORS从服务器加载图像(跨域)
      scrollY: 0, // Y轴偏移
      scrollX: 0, // X轴偏移
      scale: 1, // 用于渲染的比例尺。默认为浏览器设备像素比率。默认值是1，手机端设置成2
    }).then((canvas) => {
    // 生成图片，设置导出质量（0-1）
    var imgURL = canvas.toDataURL('image/jpeg', 1.0)
    // 创建a标签，模拟点击下载
    const $a = document.createElement("a");
    $a.setAttribute("download", title);
    $a.href = imgURL;
    $a.click();
  })
}

特别注意：网络图片存在跨越问题的，导出后会不显示图片，解决方法修改图片跨越问题，或者图片转换为Base64格式（本地图片也可），相应html2Canvas配置（跨域）见代码！