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

心已赠人 2021-12-10 20:23 491阅读 0赞

最近在做一些需求，需要下载一些文件信息，最频繁的就是下载excel文件到本地了

看过了很多方法，做个整理吧哈哈哈哈

参考的文章链接：

[https://www.cnblogs.com/jiangweichao/p/9620940.html][https_www.cnblogs.com_jiangweichao_p_9620940.html]

[https://www.jianshu.com/p/56680ce1cc97][https_www.jianshu.com_p_56680ce1cc97]

[https://www.cnblogs.com/jasmine-95/p/6054652.html][https_www.cnblogs.com_jasmine-95_p_6054652.html]

[https://www.cnblogs.com/duke-peng/p/8862773.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');

![复制代码][copycode.gif]

使用此方式时，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);
                    });
                },

![复制代码][copycode.gif]

**二、获取后台返回的流数据，并下载pdf zip xlsx word ...**

（这种方法我尝试的时候发现它能下载excel，但是打不开,总是报错... 由于当时在解决问题 就换了种方式去实现了 仅供参考）

![复制代码][copycode.gif]

/** 后台返回的字节流 下载 */
            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);
                    }
                });
            },

![复制代码][copycode.gif]

**三、后台生成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文件**

![复制代码][copycode.gif]

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();//表单提交
    },

![复制代码][copycode.gif]

**3.3 Ajax异步交互**

![复制代码][copycode.gif]

$.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对象
    
                            }
                        });

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

使用这种方式导出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]))
            }

![复制代码][copycode.gif]

转自：[https://www.cnblogs.com/DFX339/p/10080279.html][https_www.cnblogs.com_DFX339_p_10080279.html]

[https_www.cnblogs.com_jiangweichao_p_9620940.html]: https://www.cnblogs.com/jiangweichao/p/9620940.html
[https_www.jianshu.com_p_56680ce1cc97]: https://www.jianshu.com/p/56680ce1cc97
[https_www.cnblogs.com_jasmine-95_p_6054652.html]: https://www.cnblogs.com/jasmine-95/p/6054652.html
[https_www.cnblogs.com_duke-peng_p_8862773.html]: https://www.cnblogs.com/duke-peng/p/8862773.html
[copycode.gif]: /images/20211210/aa3b86e3a0084610b5b877ff4a1d94fc.png
[https_www.cnblogs.com_DFX339_p_10080279.html]: https://www.cnblogs.com/DFX339/p/10080279.html