前端vue项目-关于下载文件pdf/excel
最近在做一些需求，需要下载一些文件信息，最频繁的就是下载excel文件到本地了看过了很多方法，做个整理吧哈哈哈哈参考的文章链接：https://www.cnblogs.com/jiangweichao/p/9620940.htmlhttps://www.jianshu.com/p/56680ce1cc97https://www.cnblogs.com/jasmine-95/p/...
·
最近在做一些需求，需要下载一些文件信息，最频繁的就是下载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中)
<span v-html="emailContent" id="emailContentId"></span> //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]))
}
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)