form表单 vue 导出文档_vue实现通用导出（excel，csv, pdf文件）组件 前端导出

1

2

3

4 导出5

6

7

8

9 {{ item.ExportName }}

10

11

12

13

14

15

16 import json2csv from "json2csv";17 import excel from "../../Common/libs/excel";18 export default{19 data() {20 return{21 exportList: [22 {23 ExportName: "1-导出Excel",24 ExportID: "Excel"

25 },26 {27 ExportName: "2-导出Csv",28 ExportID: "Csv"

29 },30 {31 ExportName: "3-导出Pdf",32 ExportID: "Pdf"

33 }34 ]35 };36 },37 props: {38 exportData: {39 type: Array,40 default: []41 },42 isPagination: {43 type: Boolean,44 default: false

45 },46 exportColumns: {47 type: Array,48 default: []49 },50 exportFileName: {51 type: String,52 default: ""

53 }54 },55 watch: {},56 computed: {},57 mounted() {58 //this.getRPTExportType() 初始化导出类型

59 },60 methods: {61 //下拉菜单改变时事件

62 handleExportTypeChange(param) {63 //change 事件改变的时候提交给父组建 参数 value

64 this.$emit("myHandleExportTypeChange", param);65 },66 //判断是否IE浏览器

67 MyBrowserIsIE() {68 let isIE = false;69 if(70 navigator.userAgent.indexOf("compatible") > -1 &&

71 navigator.userAgent.indexOf("MSIE") > -1

72 ) {73 //ie浏览器

74 isIE = true;75 }76 if (navigator.userAgent.indexOf("Trident") > -1) {77 //edge 浏览器

78 isIE = true;79 }80 returnisIE;81 },82 //创建a标签下载

83 createDownLoadClick(content, fileName) {84 const link = document.createElement("a");85 link.href =encodeURI(content);86 link.download =fileName;87 document.body.appendChild(link);88 link.click();89 document.body.removeChild(link);90 },91 btnExport(fileType) {92 debugger;93 //如果是分页的

94 if (this.isPagination == true) {95 //向父组件提交一个需要重新传数据的方法 类型name

96 this.$emit("myHandleRepeatExprot", fileType);97 } else{98 //不分页直接导出

99 this.exportFile(fileType);100 }101 },102 exportFile(fileType) {103 if (this.exportData.length == 0) {104 this.$Message.error("不允许导出空表格");105 return false;106 }107 //循环数组

108 this.exportData.forEach((item, index) =>{109 let temp ={};110 //循环数组中的对象 当传入数据为undefined的时候 赋空

111 Object.keys(item).forEach(function(key) {112 if (item[key] ==undefined) {113 item[key] == " ";114 temp[key] = "";115 } else{116 temp[key] =item[key];117 }118 });119 this.exportData[index] =temp;120 });121 let titles = []; //导出内容的中文标题

122 let keys = []; //导出内容的英文标题

123 this.exportColumns.forEach((item, index) =>{124 if (item.key != "handle") {125 //操作列定义为 handle

126 titles.push(item.title);127 keys.push(item.key);128 }129 });130 if (fileType == "Excel") {131 const param ={132 title: titles,133 key: keys,134 data: this.exportData,135 autoWidth: true,136 filename: this.exportFileName137 };138 excel.export_array_to_excel(param);139 } else if (fileType == "Csv") {140 this.exportCsv(141 this.exportData,142 this.exportColumns,143 keys,144 this.exportFileName145 );146 } else{147 //导出pdf

148 let tempArray =[];149 let labels = titles.join(","); //title拼接成一个字符串

150 let keys2 = keys.join(","); //拼接字符串

151 let row0 = this.exportData[0]; //导出数组内容的第一行

152 var rowKeys =[];153 for (var p1 inrow0) {154 //数组

155 if(row0.hasOwnProperty(p1)) {156 rowKeys.push(p1); //table内容的 key

157 }158 }159 //keys 和 table的第一列的key比较 取table中不存在的列 为了赋空值

160 var diffArray = keys.filter(key => !rowKeys.includes(key));161

162 let tableData =[];163 //循环数组

164 this.exportData.forEach((rowItem, index) =>{165 let temp =rowItem;166 diffArray.forEach((keyItem, index) =>{167 temp[keyItem] = " ";168 });169 tableData.push(temp);170 });171 this.exportPdfFile(keys2, labels, tableData);172 }173 },174 //row data里面的每一个对象 keys 传入的需要导出列数组

175 //筛选 需要导出的数据内容

176 /// 例如 keys ["Ordinal","Code"] row 有{Ordinal:1,Code:2,Name:3} 返回新对象{Ordinal:1,Code:2}

177 getRow(row, keys) {178 let obj ={};179 keys.forEach(col =>{180 debugger;181 let val =row[col];182 obj[col] =val;183 });184 returnobj;185 },186 exportCsv(data, columns, keys, fileName) {187 //导出的数据行集合

188 const rows = data.map(t => this.getRow(t, keys));189 //导出的数据列标题

190 var fields =[];191 columns.forEach(t =>{192 if (t.key != "handle") {193 //操作列定义为handle

194 let temp ={195 value: t.key,196 label: t.title197 };198 fields.push(temp);199 }200 });201 try{202 const result =json2csv.parse(rows, {203 fields: fields,204 excelStrings: true

205 });206 if (this.MyBrowserIsIE()) {207 //IE10以及Edge浏览器

208 var BOM = "\uFEFF";209 var csvData = new Blob([BOM + result], { type: "text/csv"});210 navigator.msSaveBlob(csvData, `${fileName}.csv`);211 } else{212 let csvContent = "data:text/csv;charset=utf-8,\uFEFF" +result;213 //非ie 浏览器

214 this.createDownLoadClick(csvContent, `${fileName}.csv`);215 }216 } catch(err) {217 alert(err);218 }219 },220 exportPdfFile(valueKeys, labeNames, tableData) {221 let rexportPdfFile ={222 ExCode: "DownLoadFile",223 fileName: this.exportFileName,224 access_token: this.$cookies.get("access_token"),225 valueKeys: valueKeys, //例如 "Product,Version,Description",

226 labeNames: labeNames, //例如 "产品,版本,描述",

227 tableData: tableData228 };229 //思路 webapi返回二进制的文件流 js 通过Blob接收并转换成pdf文件下载

230 this.$axios({231 method: "post",232 Prefix: "",233 data: {234 ExCode: "IRAP_RPT_DownLoadFile",235 fileName: this.exportFileName,236 access_token: this.$cookies.get("access_token"),237 valueKeys: valueKeys, //"Product,Version,Description",

238 labeNames: labeNames, //"产品,版本,描述",

239 tableData: tableData240 }241 //responseType:'blob'

242 })243 .then(response =>{244 //base64字符串转 byte[]

245 var bstr =atob(response.data.FileInfo),246 n =bstr.length,247 u8arr = newUint8Array(n);248 while (n--) {249 u8arr[n] =bstr.charCodeAt(n);250 }251 //转blob

252 var blob = newBlob([u8arr], {253 type: `application/pdf;charset-UTF-8`

254 });255

256 if (this.MyBrowserIsIE()) {257 //IE10以及Edge浏览器

258 var BOM = "\uFEFF";259 //传入 Blob 对象

260 navigator.msSaveBlob(blob, `${this.exportFileName}.pdf`);261 } else{262 //非ie 浏览器

263 let content =window.URL.createObjectURL(blob);264 this.createDownLoadClick(content, `${this.exportFileName}.pdf`);265 }266 })267 .catch(err =>{268 console.log(err);269 });270 },271 getRPTExportType() {272 this.$axios({273 method: "post",274 Prefix: "",275 data: {276 ExCode: "IRAP_RPT_ExportType",277 access_token: this.$cookies.get("access_token")278 }279 }).then(response =>{280 if (response.data.ErrCode == 0) {281 this.exportList =response.data.Rows282 } else{283 this.$Message.error(response.data.ErrText)284 }285 })286 .catch(err =>{287 console.log(err);288 });289 }290 }291 };292