前端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中)

<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]))
        }