小功能之——————将当前页面导出成图片并自动下载

import domtoimage from 'dom-to-image' 
import html2camvas from 'html2canvas'

　　function saveView() { // 这个框架ok,网上说这个框架清晰度不好，我试了下，感觉还够用！
  let capture = document.querySelector('#index') as HTMLElement; // 导出内容的容器
  if (capture) {
    domtoimage.toPng(capture, {}).then(function (dataUrl) {
        let a = document.createElement('a')
        let event = new MouseEvent('click');
        a.href = dataUrl
        a.setAttribute('download', `测点详情分析-${dayjs().format('YYYYMMDDhhmmhh')}.png`)
        if(a.dispatchEvent(event)) {
          ElMessage('视图自动保存中，请注意查收！')
        }
    })
    // html2canvas(capture, { // 这个导出框架，我用的时候某些元素会偏移，百度查阅后，有说当页面元素存在在transform，属性时，就会位置偏移。其他功能都ok
    //   logging: false, //日志开关，便于查看html2canvas的内部执行流程
    //   width: capture.clientWidth, //dom 原始宽度
    //   height: capture.clientHeight,
    //   scale:1.2,
    //   scrollY: 0,
    //   scrollX: 0,
    //   useCORS: true // 【重要】开启跨域配置
    // }).then(canvas => {
    //   let a = document.createElement('a')
    //   let event = new MouseEvent('click');
    //   a.href = canvas.toDataURL()
    //   a.setAttribute('download', `测点详情分析-${dayjs().format('YYYYMMDDhhmmhh')}.png`)
    //   if(a.dispatchEvent(event)) {
    //     ElMessage('视图自动保存中，请注意查收！')
    //   }
    // })
  }
}