其他分享
首页 > 其他分享> > vue截图界面保存本地

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();
      });
}

 

标签:截图,vue,界面,ImageDiv,res,html2canvas,var,图片
来源: https://www.cnblogs.com/Intellectualscholar/p/15315452.html