在Vue项目中使用html2canvas生成页面截图并上传
Posted shirliey
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Vue项目中使用html2canvas生成页面截图并上传相关的知识,希望对你有一定的参考价值。
引入cnpm install html2canvas.
html代码
<!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref --> <div class="image_tofile" ref="imageTofile"> <!-- 这里放需要截图的元素,自定义组件元素也可以 --> </div> <!-- 如果需要展示截取的图片,给一个img标签 --> <img :src="htmlUrl">
js代码
// 引入html2canvas import html2canvas from ‘html2canvas‘ // 注册组件 data() { return { htmlUrl: ‘‘ } }, components: { html2canvas }, methods: { // 页面元素转图片 toImage() { // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等 html2canvas(this.$refs.imageTofile, { backgroundColor: null }).then((canvas) => { let url = canvas.toDataURL(‘image/png‘); this.htmlUrl = url; // 把生成的base64位图片上传到服务器,生成在线图片地址 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) { } }) } }
以上是关于在Vue项目中使用html2canvas生成页面截图并上传的主要内容,如果未能解决你的问题,请参考以下文章