html2canvas将vue页面转换为图片

最新推荐文章于 2024-11-29 15:34:09 发布

sunnyboysix

最新推荐文章于 2024-11-29 15:34:09 发布

阅读量352

点赞数

分类专栏： vue 文章标签： html2canvas vue页面转为图片

本文链接：https://blog.csdn.net/sunnyboysix/article/details/116995262

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一官方网站

http://html2canvas.hertzen.com/

二安装依赖引入

npm install html2canvas

import html2canvas from 'html2canvas';

三简单封装html2canvas

import html2canvas from 'html2canvas';

const exp = {}

//refVal => this.$refs.refContent, imgName => 'test'

exp.toImage = function(refVal, imgName) {

html2canvas(refVal, {

backgroundColor: '#ffffff'

}).then(canvas => {

let imgData = canvas.toDataURL("image/jpeg");

exp.fileDownload(imgData, imgName);

})

}

exp.fileDownload = function(imgData, imgName) {

let aLink = document.createElement("a");

aLink.style.display = "none";

aLink.href = imgData;

aLink.download = `${imgName}.png`

// 触发点击-然后移除

document.body.appendChild(aLink)

aLink.click();

document.body.removeChild(aLink)

}

export default exp

四具体使用

//main.js中引入html2canvas

Vue.prototype.$html2canvas = html2canvas

//ref自定义名称

<div class="contentBox" ref="refContent" >

<router-view />

</div>

//页面中调用，路由在哪个页面调用这个方法就可以转换哪个页面为图片， test为图片名称

this.$html2canvas.toImage(this.$refs.refContent, 'test')