视觉中国设计网站,移动端网站开发介绍,百度账号注册中心,网络营销内容有哪些方面给到我的需求是点击按钮时请求后端接口#xff0c;根据后端返回的数据#xff0c;生成表格,并将表格的内容直接下载为html,如下图。 平常做的下载都是后端返回二进制流#xff0c;这次前端做下载那就必须把页面先画出来#xff0c;因为下载下来的表格在页面上是不显示的根据后端返回的数据生成表格,并将表格的内容直接下载为html,如下图。 平常做的下载都是后端返回二进制流这次前端做下载那就必须把页面先画出来因为下载下来的表格在页面上是不显示的所以要画出来再隐藏一下隐藏的时候可选方式有很多但是v-if,v-show这种会导致页面重构的不建议使用事实也证明v-if和v-show在这种场景是不能使用的因为这种场景要求表格是实际存在的元素所以我选择了绝对定位加上z-index:-999的方式让表格隐藏在文档流下面。 1html代码-表格样式 dividcanvas-file1stylewidth: 800px;line-height: 20px;font-size: 14px;position: absolute;z-index: -999;tablewidth800pxborder1pxcellspacing0pxcellpadding10pxaligncenterbgcolor#fffstylemargin-top: 10pxtrth商品名称/thth规格/thth数量/thth金额元/th/trtbody aligncentertemplate v-foritem in table1.goodsDetailsInfoVOListtr v-ifitem.hasChildrentd :rowspanitem.children.length 1{{ item.goodsName }}/tdtd{{ item.goodsSpec }}/tdtd{{ item.goodsNum }}/tdtd{{ item.payAmount }}/td/trtr v-foritem in item.childrentd{{ item.goodsSpec }}/tdtd{{ item.goodsNum }}/tdtd{{ item.payAmount }}/td/tr/template/tbody/table/div表格画好以后考虑两种下载的方法一种是将表格转成图片然后将图片转成html页面下载。第二种是将表格作为字符串拼接到html页面中然后下载。后续发现第一种方法累赘了当时也不知道怎么想的 记录一下第一种方法html2canvas方法里面接受两个参数第一个就是dom对象第二个是转canvas时的一些自定义配置项生成后该方法会调用then回调将canvas传递出来我们就可以拿到了。但是有一个值得一提的问题就是我发现html转canvas的过程是相当缓慢的这也是后面我放弃这种方法的原因
const handleSubmitExportGoods () {exportGoodsLoading.value true;setTimeout(() {let arr [];for (let i 0; i 100; i) {arr.push({ a: i, b: i 1, c: i 2 });}table1.value {list: arr,time: 2023-7-31 09:15:18,title: 活动名称,titleTime: 2023-7-25 09:00:00 发布,};nextTick(() {html2canvas(document.getElementById(canvas-file1), {backgroundColor: transparent, //背景图片透明allowTaint: true, //跨域useCORS: true, //跨域}).then((canvas) {exportGoodsLoading.value false;let oImg new Image();oImg canvas.toDataURL(image/png); // 导出图片const html !DOCTYPE htmlhtml langenheadmeta charsetUTF-8title/title/headbody stylemargin:0img src${oImg}/img/body/html;let blob new Blob([html], { type: text/html });let url window.URL.createObjectURL(blob);let a document.createElement(a);a.download 订单;a.style.display none;a.href url;document.body.appendChild(a);a.click();a.remove();**});});}, 500);
};然后就是第二种方法把table拼到html里面直接上代码
const downloadFile (domName, fileName) {let htmlStr document.getElementById(domName).innerHTML;const html !DOCTYPE htmlhtml langenheadmeta charsetUTF-8title/title/headbody stylemargin:0${htmlStr}/body/html;let blob new Blob([html], { type: text/html });let url window.URL.createObjectURL(blob);let a document.createElement(a);a.download fileName;a.style.display none;a.href url;document.body.appendChild(a);a.click();a.remove();
};
