前端截长屏功能

使用 npm包 js_screen_shots 可以实现前端截长屏功能，这个包集成了两个方法 html2canvas 和 Canvas2Image

先使用 把页面转成 canvas，然后 Canvas2Image 把转后的 canvas作为图片下载

import all from 'js_screen_shots'
 
all.html2canvas(document.getElementsByTagName('body')[0]).then(canvas => {
  all.Canvas2Image.saveAsPNG(canvas)
  loading.close()
});

对于有最大高度的模块，可以在 html2canvas 之前把高设置为 'auto'，下载后再还原、以下是我项目中的代码

import all from 'js_screen_shots'
import { ElLoading } from 'element-plus'
export default {
  setup(props) {
    //导出长屏方法
    function capturePage() {
      const loading = ElLoading.service({
        lock: false,
        text: '导出中...',
      })
 
      document.getElementsByClassName('el-main')[0].style.height = 'auto'
      all.html2canvas(document.getElementsByTagName('body')[0], {
        allowTaint: true,
        useCORS: true
      }).then(canvas => {
        // document.body.prepend(canvas)
        all.Canvas2Image.saveAsPNG(canvas)
        document.getElementsByClassName('el-main')[0].style.height = ''
        loading.close()
      });
    }
    return { capturePage }
  }
}

PS:如果脱离于项目，可以使用一下方法截长图：

方法一：GoFullPage谷歌插件
方法二：或者其他工具来截图
方法三：使用谷歌浏览器控制台（F12打开控制台,Ctrl+Shift+P 输入 screenshot，选择Capture full size screenshot即可），