最近在做一些需求,需要下载一些文件信息,最频繁的就是下载excel文件到本地了
看过了很多方法,做个整理吧哈哈哈哈
参考的文章链接:
https://www.cnblogs.com/jiangweichao/p/9620940.html
https://www.jianshu.com/p/56680ce1cc97
https://www.cnblogs.com/jasmine-95/p/6054652.html
https://www.cnblogs.com/duke-peng/p/8862773.html
一、 将页面中的html信息转换为PDF文档,下载到本地
先将html生成为图片,再将图片转为pdf文档
var target = document.getElementById('policy-information');// 是将target指向需要被生成的html内容
例如:(vue中)
//emailContent是定义好的html内容,并且在return里定义了 emailContent
此时的target为: var target = document.getElementById('emailContentId');
使用此方式时,vue需要安装模块:
npm install html2canvas jspdf --save
downPdf() { var that = this; var target = document.getElementById("policy-information");//policy-information是html的id信息 //target.style.background = "#FFFFFF"; html2canvas(target, { "imageTimeout": 0, 'scale': 2, }).then(canvas => { var contentWidth = canvas.width; var contentHeight = canvas.height; //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 592.28 * 841.89; //未生成pdf的html页面高度 var leftHeight = contentHeight; //页面偏移 var position = 0; //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高 var imgWidth = 595.28; var imgHeight = 592.28 / contentWidth * contentHeight; var pageData = canvas.toDataURL('image/jpeg', 1.0); var pdf = new jspdf('', 'pt', 'a4'); //有两个高度需区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围,无需分页 if(leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) } else { while(leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight; position -= 841.89; //避免添加空白页 if(leftHeight > 0) { pdf.addPage(); } } } var name = 'content-' + that.plcNo + '.pdf'; // 定义生成的pdf的文件名字 pdf.save(name); }); },
二、获取后台返回的流数据,并下载pdf zip xlsx word ...
(这种方法我尝试的时候发现它能下载excel,但是打不开,总是报错... 由于当时在解决问题 就换了种方式去实现了 仅供参考)
/** 后台返回的字节流 下载 */ downloadPDF () { let that = this; $.ajax({ url:'http://localhost:8080/download' //后台下载信息的请求链接 type: "GET", responseType: 'arraybuffer', success: function(response){ //response为后台返回的流数据信息 //msword pdf zip // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型 var blob = new Blob([response], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'}); var downloadElement = document.createElement('a'); var href = window.URL.createObjectURL(blob); // 创建下载的链接 downloadElement.href = href; downloadElement.download = '表格'+'.xlsx'; // 下载后文件名 document.body.appendChild(downloadElement); downloadElement.click(); // 点击下载 document.body.removeChild(downloadElement); // 下载完成移除元素 window.URL.revokeObjectURL(href); // 释放掉blob对象 }, error: function(data) { alert("下载失敗"+data); } }); },
三、后台生成Excel,前端直接获取并下载Excel
这大概是最简单的方式吧,直接使用请求去访问后台,然后使用window.open打开就可以了
3.1 get方式请求后台,直接使用window.open打开请求结果。
downLoadExcel(){ window.open('http://localhost:8080/ens-notify/excelDownload?batchcode='+this.batchCode); }
3.2 Form表单方式请求后台,直接下载excel文件
exportAllExcel() { var tt = new Date().getTime(); var url ="http://localhost:8080"+"/excelDownload"; /** * 使用form表单来发送请求 * 1.method属性用来设置请求的类型——post还是get * 2.action属性用来设置请求路径。 * */ var form=$("