vue前端导出（vue文件导出成图片形式）

import getJpeg from "@/utils/html-jpeg";
const exprtPic = async () => {
  exportLoading.value=true
  const resultContentJpeg = await getJpeg(skcListDom.value);//ref的div元素
  let link = document.createElement("a");
  //图片转成base64格式
  link.href = resultContentJpeg;
  link.download = "页面截图";
  link.click();
  exportLoading.value=false
};

@/utils/html-jpeg文件

import html2Canvas from 'html2canvas'

const getJpeg = (dom) => new Promise((resolve) => {
  html2Canvas(dom, {
    // dpi: 300,
    // scale: 2,
    backgroundColor: '#ffffff',
    imageTimeout: 20000,
    timeout: 20000,
    background: '#001426',
    allowTaint: true, // 这两个属性都是图片跨域相关属性
    useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
  }).then((canvas) => {
    const jpeg = canvas.toDataURL('image/jpeg', 1.0)
    // resolve(new Blob([jpeg]));
    resolve(jpeg)
  })
})
// base64转化为file文件
const base64ToFile = (urlData) => {
  const arr = urlData.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]
  const bytes = atob(arr[1])
  let n = bytes.length
  const ia = new Uint8Array(n)
  while (n--) {
    ia[n] = bytes.charCodeAt(n)
  }
  return new File([ia], 'file.jpeg', { type: mime })
}

export default getJpeg