html2canvas vue 为定义_vue使用html2canvas

有时候我们会用到将网页上的东西转换为图片的需求，有一种插件就可以帮助我们来完成，现在我来介绍这个插件如何使用

1.安装html2canvas

npm install --save html2canvas

2.导入

import html2canvas from "html2canvas";

3.html

我是截取的内容

4.转成图片的方法

toImage() {

html2canvas(this.$refs.imageTofile, {

backgroundColor: null,

}).then((canvas) => {

let url = canvas.toDataURL("image/png");

this.htmlUrl = url;

if (this.htmlUrl) {

this.isShow = true;

}

});

5.完整代码(仅供参考)

我是截取的内容

我是截取的内容

我是截取的内容

我是截取的内容

我是截取的内容

截取

import html2canvas from "html2canvas";

export default {

data() {

return {

htmlUrl: "",

isShow: false,

};

},

methods: {

// 页面元素转图片

toImage() {

// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等

html2canvas(this.$refs.imageTofile, {

backgroundColor: null,

}).then((canvas) => {

let url = canvas.toDataURL("image/png");

this.htmlUrl = url; // 把生成的base64位图片上传到服务器,生成在线图片地址

if (this.htmlUrl) {

// 渲染完成之后让图片显示，用v-show可以避免一些bug

this.isShow = true;

}

// this.sendUrl();

});

}, // 图片上传服务器

sendUrl() {

// 如果图片需要formData格式,就自己组装一下,主要看后台需要什么参数

// const formData = new FormData()

// formData.append('base64', this.company.fileUrl)

// formData.append('userId', 123)

// formData.append('pathName', 'pdf')

// ==================

// this.$ajax({

// url: apiPath.common.uploadBase,

// method: "post",

// data: this.htmlUrl,

// }).then((res) => {

// if (res.code && res.data) {

// }

// });

},

},

};

6.效果展示

7.参考

感谢https://www.cnblogs.com/shirliey/p/10647239.html博主给的思路