vue如何将html内容转为图片并下载到本地

目录将html内容转为图片并下载到本地vue将html页面转为图片并且下载该图片总结将html内容转为图片并下载到本地需求：将自己写的html内容转化为图片并可以下载到本地1.安装html2canva...

目录

将html内容转为图片并下载到本地

需求：将自己写的html内容转化为图片并可以下载到本地

1.安装html2canvas

npm install --save html2canvas

2.在自己所需要的页面进行引入

import html2canvas from "html2canvas";

3.html

<div class="popuptop" id="img">
  <div class="pupupbg">
    内容内容内容
  </div>
</div>
<div class="weixin" @click="downimg">
  <div class="weixinlogo" >
    <img src="../../assets/images/mypage/down.png">
     <p class="weixinshare" >下载</p>
   </div>
</div>
<a id="downimg" href="" style=" rel="external nofollow" display:none"></a>

4.js 

//下载图片
let downimg= ()=>{
 setTimeout(()=>{
  proxy.$nextTick(()=>{
   html2canvas(document.querySelector('#img'),{
    useCORS: true
   }).then(canvas => {
    var url = canvas.toDataURL()   //把canvas转成base64
    // 写一个隐藏的按标签，借助按标签的download属性下载图片
    document.querySelector('#downimg').href = url
    document.querySelector('#downimg').download = "我的持仓报告.png"
    document.querySelector('#downimg').click()
   })
  })
 },2000)
}

以上代码就能实现将html内容转为图片并下载到本地。

vue将html页面转为图片并且下载该图片

1.下载 html2canvas

npm install html2canvas

2.对应页面引入该插件

import html2canvas from 'html2canvas';

3.具体用法 （要element使用带有一些（可选）选项的 html2canvas 呈现，只需调用html2canvas(element, options);）

html2canvas(document.body).then(function(canvas) {
  document.body.appendChild(canvas);
});

4.转为图片并且下载

<template>
 <div>
  <div class="container" ref="imageDom">hahahah</div>
  <button @click="toImage">导出</button>
 </div>
</template>

在methods方法中：

toImage() {
  html2canvas(this.$refs.imageDom, {
    bacwww.cppcns.comkgroundColor: '#ffffff'
  }).then(canvas => {
    var imgData = canvas.toDataURL("image/jpeg");
    this.fileDownload(imgData);
  })
},
fileDownload(downloadUrl) {
  let aLink = document.createElement("a");
  aLink.style.display = "none";
  aLink.href = downloadUrl;
  aLink.download = "监控详情.png";
  // 触发点击-然后移除
  document.body.appendChild(aLink);
  aLink.click();
  document.body.removeChild(aLink);
},

效果图：

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。