前端通过html2canvas实现页面截图并获取文件流

html2Canvas.js
import html2canvas from 'html2canvas'

export const html2CanvasUtil = {
  imgFile: null,
  // 获取像素密度
  getPixelRatio: function(context) {
    const backingStore = context.backingStorePixelRatio ||
            context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
            context.msBackingStorePixelRatio ||
            context.oBackingStorePixelRatio ||
            context.backingStorePixelRatio || 1
    return (window.devicePixelRatio || 1) / backingStore
  },
  /*
    绘制dom 元素，生成截图canvas
    params:
      dom: 需要绘制的部分的 (原生）dom 对象
  */
  html2Canvas: function(dom,name) {
    const targetDom = dom
    targetDom.style.width = dom.scrollWidth + 'px'
    targetDom.style.height = dom.scrollHeight + 'px'
    // document.body.appendChild(targetDom)// 截图滚动区域

    const width = dom.offsetWidth // 获取(原生）dom 宽度
    const height = dom.offsetHeight // 获取(原生）dom 高
    const offsetTop = dom.offsetTop // 元素距离顶部的偏移量
    const canvas = document.createElement('canvas') // 创建canvas 对象
    const context = canvas.getContext('2d')
    const scaleBy = 1
    // let scaleBy = this.getPixelRatio(context) // 获取像素密度的方法 (也可以采用自定义缩放比例)
    canvas.width = width * scaleBy
    canvas.height = (height + offsetTop) * scaleBy // 注意高度问题，由于顶部有个距离所以要加上顶部的距离，解决图像高度偏移问题
    context.scale(scaleBy, scaleBy)
    const options = {
      allowTaint: true, // 允许加载跨域的图片
      tainttest: true, // 检测每张图片都已经加载完成
      scale: scaleBy, // 添加的scale 参数
      canvas: canvas, // 自定义 canvas
      logging: true, // 日志开关，发布的时候记得改成false
      useCORS: true,
      width: width, // dom 原始宽度
      // height: height // dom 原始高度
      height: dom.scrollHeight
    }
    html2canvas(targetDom, options).then((canvas) => {
      // toDataURL 图片格式转成 base64
      const dataURL = canvas.toDataURL('image/png', 0.5) // 0.5是图片质量
      const arr = dataURL.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      const blob = new Blob([u8arr], { type: mime })
      const file = new window.File([blob],name +'.jpg', { type: 'image/jpeg' })
      this.imgFile = file 
      // this.downloadImage(dataURL)
    })
  },
  // 下载图片
  downloadImage(url) {
    const a = document.createElement('a')
    a.href = url
    a.download = '截图'
    a.click()
  }
}

页面调用

import { html2CanvasUtil } from '@/xxxx/html2Canvas'

//点击按钮截图
handleClick(){
   const dom = document.getElementsByClassName('app-wrapper')[0]
   html2CanvasUtil.html2Canvas(dom,'截图自定义名称')
}

//监听滚动条是否到底自动截图
<div @scroll="handleScroll" class="Box" ref="Box>内容</div>
//监听是否滚动到底部
 handleScroll() {
       const container = document.querySelector('.Box'); 
       const { scrollTop, scrollHeight, clientHeight } = container;  
       if (scrollTop + clientHeight + 0.5>= scrollHeight && this.isScroll==true) { 
         this.isBottom = true    
           const dom = document.getElementsByClassName('app-wrapper')[0]
           html2CanvasUtil.html2Canvas(dom,'截图自定义名称')
       }else{
         this.isBottom = false
       }  
    },
 scrollHeight(){
      //开始滚动
      this.$nextTick(()=>{
        this.isScroll = false
        let scrollElem = this.$refs.Box;
        scrollElem.scrollTo({ top: scrollElem.scrollHeight, behavior: 'smooth' });
        this.isScroll = true
      })
    },

//获取截图文件流
  let rawfile = html2CanvasUtil.imgFile;
console.log(rawfile)
mounted(){
  //初始化
  this.scrollHeight()
}