前端vue项目-关于下载文件pdf/excel（三）

前端vue项目-关于下载文件pdf/excel（三）
最近在做一些需求，需要下载一些文件信息，最频繁的就是下载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=$("<form>");//定义一个form表单
form.attr("style","display:none");
form.attr("target","");
form.attr("method","post");  //请求类型 如果是get请求可以改为get
form.attr("action",url);   //请求地址
$("body").append(form);//将表单放置在web中

　　/**
     * input标签主要用来传递请求所需的参数：
     *
     * 1.name属性是传递请求所需的参数名.
     * 2.value属性是传递请求所需的参数值.
     *
     * 3.当为get类型时，请求所需的参数用input标签来传递，直接写在URL后面是无效的。
     * 4.当为post类型时，queryString参数直接写在URL后面，formData参数则用input标签传递
     *       有多少数据则使用多少input标签
     *
　　　*/
var input1=$("<input>");input1.attr("type","hidden");input1.attr("name","batchcode"); input1.attr("value",'2018120601');form.append(input1);
var input2=$("<input>");input2.attr("type","hidden");input2.attr("name","msgState"); input2.attr("value",'0');form.append(input2);
var input3=$("<input>");input3.attr("type","hidden");input3.attr("name","businessType"); input3.attr("value",'P');form.append(input3);
var input4=$("<input>");input4.attr("type","hidden");input4.attr("name","origin"); input4.attr("value",'222');form.append(input4);
var input5=$("<input>");input5.attr("type","hidden");input5.attr("name","createDate"); input5.attr("value",tt);form.append(input5);

form.submit();//表单提交

},
复制代码

3.3 Ajax异步交互

复制代码
$.ajax({
url: “http://localhost:8080”+"/excelDownload",
type: “GET”, //请求方式可变为post
contentType: “application/json”,
data: {
batchcode:this.batchCode,
msgState:this.msgState,
businessType:this.businessType,
origin:this.origin,
createDate:this.createDate
},
success: function(response) {
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 = ‘111.xlsx’; // 下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); // 点击下载
window.URL.revokeObjectURL(href); // 释放掉blob对象

                    }
                });

复制代码

四、.根据页面的table数据导出Excel

复制代码
使用这种方式导出Excel，需要再vue中安装三个插件，并且导入两个js文件放在src下
npm install -S file-saver xlsx

npm install -D script-loader
并且从网上下载js文件： Blob.js和Export2Excal.js
放在项目的src/excel_plugin 目录下

exportChooseExcel: function() { // 兼容ie10哦！
require.ensure([], () => {
const { export_json_to_excel } = require(’…/excel_plugin/Export2Excel’); // 引入文件
//消息號 PDF 生成批次號 保單號 客戶號 消息類型 業務分類 接收人類型 模板 ID 消息創建者 創建時間 狀態
const tHeader = [‘消息號’, ‘PDF 生成批次號’, ‘保單號’, ‘客戶號’, ‘業務分類’ ,‘模板 ID’, ‘狀態’ ,‘創建時間’, ‘printFileId’]; //Excel的列名称信息定义
const filterVal = [‘msgId’, ‘batchCode’, ‘biztypeno’, ‘custno’, ‘businessType’ ,‘templateId’, ‘msgstate’ ,‘createdDate’, ‘printFileId’]; //
const list = this.multipleSelection; //这是表格中的数据内容 （需要导出的数据内容信息 tableData）
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, ‘列表excel’); //列头信息 数据内容 导出的excel文件名字
})

    },
    formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
    }

复制代码
分类: Vue