vue截图界面保存本地

使用html2canvas把界面生成图片

 

下载 html2canvas 依赖：

npm install html2canvas -S

 

需要使用 html2canvas 页面引入该依赖：

import html2canvas from 'html2canvas'

 

html代码：

<template>
    <div>
        <div @click="saveImage()">截图保存图片</div>
        <div ref="ImageContent">
            界面内容...........
        </div>
    </div>
</template>    

 

JS生成图片并下载保存代码：

saveImage() {
      const ImageDiv= this.$refs.ImageContent;
      //使用html2canvas把界面内容生成图片
      html2canvas(ImageDiv).then(res => {
        var dataUrl = res.toDataURL('image/jpeg', 1.0);//图片转为下载路径
        var a = document.createElement('a');//创建a标签
        a.href = dataUrl;
        a.download = '系统模块.png';//设置图片名称
        a.click();
      });
}