vue2将html元素转换成图片

需要用到html2canvas插件

安装插件

npm install html2canvas

在需要的页面引入插件

import html2canvas from "html2canvas";

在需要转换的元素上绑定ref的值，（这里这个元素内包括元素本身的所有样式，都会被转换）

<el-button type="primary" @click="export">导出图片</el-button><div ref="exportCanvas"><p>123456789</p></div>

export() {html2canvas(this.$refs.exportCanvas, {allowTaint: false, // 是否允许跨域图像污染画布useCORS: true, // 使用CO RS从服务器加载图像，必须为true否则img图片可能显示不出来// x: 裁剪画布x坐标,// y: 裁剪画布y坐标,}).then((canvas) => {// 点击保存操作const link = document.createElement("a");link.href = canvas.toDataURL();link.setAttribute("download", "导出图片名称" + ".png");link.style.display = "none";document.body.appendChild(link);link.click();});},

2022-12-28补充，将该方法封装为公共组件

//file-saver 文件处理  https://www.npmjs.com/package/file-saver

import { saveAs } from "file-saver";
import html2canvas from "html2canvas";
/*** 构造树型结构数据* @param {string} id 要下载的dom id * @param {string} fileName 下载的图片名称*/
export function downHtmlImg(domId, fileName) {let dom = document.getElementById(domId)//将html转换成画布，再用file-saver插件下载html2canvas(dom, {allowTaint: false, //默认为false，是否允许跨域图像污染画布useCORS: true, // 使用CO RS从服务器加载图像，必须为true否则img图片可能显示不出来// imageTimeout:0,  //加载图像的超时时间（以毫秒为单位）。设置0为禁用超时。// x: 裁剪画布x坐标,// y: 裁剪画布y坐标,// scale: 2.1, //每个设备的window.devicePixelRatio的值不尽一样，想清晰就调高，想压缩大小就调低。但调的越高，图片的生成时间就越长。}).then(function(canvas) {// 改用file-saver插件下载文件，用使用document对象属性和方法保存的个别手机（小米）会下载失败且卡canvas.toBlob(function(blob) {saveAs(blob, fileName + ".png"); //格式默认png});});
}//在组件中使用
//import { downHtmlImg } from "@/utils/downHtmlImg";
//   绑定点击事件，传入domID，要下载的文件名
//   downHtmlImg(domId, fileName) {
//      downHtmlImg(domId, fileName);
//   },// 传统使用html2canvas下载图片，缺点：过慢且卡，一些手机会下载失败，因为是直接使用Document 对象属性和方法保存到本地
// let dom = document.getElementById(id)
// html2canvas(dom, {
//   allowTaint: false, //默认为false，是否允许跨域图像污染画布
//   useCORS: true, // 使用CO RS从服务器加载图像，必须为true否则img图片可能显示不出来
//   // imageTimeout:0,  //加载图像的超时时间（以毫秒为单位）。设置0为禁用超时。
//   // x: 裁剪画布x坐标,
//   // y: 裁剪画布y坐标,
//   scale: 1.3,
// })
//   .then((canvas) => {
//     // 点击保存操作
//     const link = document.createElement("a");  //创建创建a元素节点。
//     link.href = canvas.toDataURL();   //让a元素链接   指向画布的返回一个包含图片展示的 数据URL。可以使用 type 参数其类型，默认为 PNG 格式。
//     link.setAttribute("download", "全天数据报表" +'.png');  创建或改变某个新属性。
//     link.style.display = "none";   //让a元素样式为空
//     document.body.appendChild(link);  //向节点的子节点列表的末尾添加新的子节点。
//     link.click();  //触发a元素
//   })

vue2将html元素转换成图片相关推荐

JavaScript实现React实现网页转换成图片截屏下载
最近有项目的需求需要把网站内HTML内容转换成图片保存下载,找了一圈发现一个不错的插件HTML-to-image,npm 包地址:Html-to-image NPM | npm.io,该插件的原理是: ...
html页面转换成图片的三种方法——canvas、dom-to-image、html2canvas
html页面转换成图片的三种方法--canvas.dom-to-image.html2canvas canvas绘制网络图片报错(跨域) 使用canvas将html页面转成图片 dom-to-imag ...
使用html2canvas,将页面转换成图片的采坑记录(Web/Taro h5)
使用html2canvas将页面转换成图片的采坑记录 "html2canvas": "^1.4.1","@tarojs/taro": &qu ...
使用的是html5的canvas将文字转换成图片
当前功能的运用场景是:用户需要传文件给他人,在用户选择文件之后需要显示一个文件图标和所选文件的名称. 当前代码部分是摘自网上,但是已经忘记在什么地方获取的,如有侵权联系小弟后自当删除. 注意:必须在h ...
c#，将pdf文件转换成图片文件。
本文采用Adobe Acrobat9.0的COM组件,将Pdf文件的每一页转换成对应的图片文件. 开发环境:VS2010,.Net Framework4.0,Adobe Acrobat9.0. 工程中 ...
C#技术分享【PDF转换成图片——13种方案】
1.[O2S.Components.PDFRender4NET.dll],第三方DLL,可以实现PDF转图片,支持32位系统.64位系统官方试用版的dll左上角会有一排红色水印,下面这个是破解版的没 ...
Android代码（Handler的运用），HttpURLConnection的应用，将url图片地址转换成图片。
1 布局文件, <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xml ...
xml文件转换成图片_如何把pdf文件转换成图片？
pdf文件怎么转成JPG图片呢?相信有不少人在迷惑,可能还在想着截图等操作来完成转换,但如果是截图成JPG图片后的效果可能很差,并没有之前pdf文件那么清楚.那这样往往打印出来的效果也不怎么理想,那怎 ...
C#，pdf文件转换成图片文件。
本文采用Adobe Acrobat9.0的COM组件,将Pdf文件的每一页转换成对应的图片文件. 开发环境:VS2010,.Net Framework4.0,Adobe Acrobat9.0. 工程中 ...

vue2将html元素转换成图片

vue2将html元素转换成图片相关推荐

最新文章

热门文章