做的比较好的旅行网站,广东网络推广项目,wordpress网站手机端,怎么样做网站卖农产品前端工作中经常会用到把一些元素导出#xff0c;比如表格#xff0c;正好项目有遇到导出为excel和导出为图片#xff0c;就都封装实现了一下#xff0c;以供其他需求的开发者使用#xff1a;
1.导出为文档
这个说白了就是下载的功能#xff0c;传过去检索参数#xff…前端工作中经常会用到把一些元素导出比如表格正好项目有遇到导出为excel和导出为图片就都封装实现了一下以供其他需求的开发者使用
1.导出为文档
这个说白了就是下载的功能传过去检索参数按照结果下载下来没啥说的先上伪代码 ....then(blob {// 创建一个临时的URL用于下载文件console.log(blob, blob)const url window.URL.createObjectURL(new Blob([blob]));const link document.createElement(a);link.href url;link.setAttribute(download, ${xxx}.xls); //设置文件名字document.body.appendChild(link);link.click();document.body.removeChild(link);success() //callbackdialog.close() //close modal}).catch((err) {})记得请求添加 responseType: ‘blob’或者headers设置Accept:‘application/vnd.ms-excel’ 2.导出为图片
先说一下最终的方案最后使用了html2canvas的方案后面我会说一下我的实现思路 // let element ant-tableconst table document.querySelector(.xxx-table); console.log(table :, table )html2canvas(table , { scale: 1 }).then(canvas { //scale是图片大小const dataUrl canvas.toDataURL(image/png);const link document.createElement(a);link.href dataUrl;link.download table.png;link.click();});如果一个页面导出多个相同的元素比如一个页面有2个table将上方传入html2canvas的参数的table换成secondTable即可如下
var tables document.getElementsByClassName(ant-table);
var secondTable tables[1]多个元素是不能使用querySelector了 因为querySelector只能选择单个元素这里需要用其他的元素选择器最好是class或者tagname等.
再先说一下我一开始实现的思路
一开始我用的是原生的canvas创建canvas画布设置大小等选择目标元素并cloneNode(true)深度拷贝目标节点下的全部后代元素渲染元素到画布 使用drawImage方法将克隆元素渲染到画布上。元素被渲染到画布上后就可以使用toDataURL方法将画布内容导出为图片。
const imageUrl canvas.toDataURL(image/png);最后创建链接节点自动点击移除节点
const downloadLink document.createElement(a);
downloadLink.href imageUrl;
downloadLink.download element-image.png;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);这种方案肯定是正常的一个思路但是一直报cloneNode()函数有问题undefined还是找不到不记得了我以为不支持这个es比较新的函数其实想解决还是可以用原生非方法递归子节点和节点元数据。 另外还报canvas的问题。 项目太赶了我直接pass了使用了html2canvas的方案有兴趣的可以去试试。
