vue实现通用导出（excel，csv, pdf文件）组件 前端导出

const param = {
title: titles,
key: keys,
data: this.exportData,
autoWidth: true,
filename: this.exportFileName
};
excel.export_array_to_excel(param);

完整excel操作js代码如下 excel.js

1 /* eslint-disable */
2 import XLSX from ‘xlsx‘;
3
4 function auto_width(ws, data) {
5 /*set worksheet max width per col*/
6 const colWidth = data.map(row => row.map(val => {
7 /*if null/undefined*/
8 if (val == null) {
9 return {
10 ‘wch‘: 10
11 };
12 }
13 /*if chinese*/
14 else if (val.toString().charCodeAt(0) > 255) {
15 return {
16 ‘wch‘: val.toString().length * 2
17 };
18 } else {
19 return {
20 ‘wch‘: val.toString().length
21 };
22 }
23 }))
24 /*start in the first row*/
25 let result = colWidth[0];
26 for (let i = 1; i < colWidth.length; i++) {
27 for (let j = 0; j < colWidth[i].length; j++) {
28 if (result[j][‘wch‘] < colWidth[i][j][‘wch‘]) {
29 result[j][‘wch‘] = colWidth[i][j][‘wch‘];
30 }
31 }
32 }
33 ws[‘!cols‘] = result;
34 }
35
36 function json_to_array(key, jsonData) {
37 return jsonData.map(v => key.map(j => {
38 return v[j]
39 }));
40 }
41
42 // fix data,return string
43 function fixdata(data) {
44 let o = ‘‘
45 let l = 0
46 const w = 10240
47 for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
48 o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
49 return o
50 }
51
52 // get head from excel file,return array
53 function get_header_row(sheet) {
54 const headers = []
55 const range = XLSX.utils.decode_range(sheet[‘!ref‘])
56 let C
57 const R = range.s.r /* start in the first row */
58 for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
59 var cell = sheet[XLSX.utils.encode_cell({
60 c: C,
61 r: R
62 })] /* find the cell in the first row */
63 var hdr = ‘UNKNOWN ‘ + C // <-- replace with your desired default
64 if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
65 headers.push(hdr)
66 }
67 return headers
68 }
69
70 export const export_table_to_excel = (id, filename) => {
71 const table = document.getElementById(id);
72 const wb = XLSX.utils.table_to_book(table);
73 XLSX.writeFile(wb, filename);
74
75 /* the second way */
76 // const table = document.getElementById(id);
77 // const wb = XLSX.utils.book_new();
78 // const ws = XLSX.utils.table_to_sheet(table);
79 // XLSX.utils.book_append_sheet(wb, ws, filename);
80 // XLSX.writeFile(wb, filename);
81 }
82
83 export const export_json_to_excel = ({
84 data,
85 key,
86 title,
87 filename,
88 autoWidth
89 }) => {
90 const wb = XLSX.utils.book_new();
91 data.unshift(title);
92 const ws = XLSX.utils.json_to_sheet(data, {
93 header: key,
94 skipHeader: true
95 });
96 if (autoWidth) {
97 const arr = json_to_array(key, data);
98 auto_width(ws, arr);
99 }
100 XLSX.utils.book_append_sheet(wb, ws, filename);
101 XLSX.writeFile(wb, filename + ‘.xlsx‘);
102 }
103
104 // 导出不带有汉字标题的execel内容
105 export const export_array_to_excel = ({
106 key,
107 data,
108 title,
109 filename,
110 autoWidth
111 }) => {
112 const wb = XLSX.utils.book_new();
113 const arr = json_to_array(key, data);
114 arr.unshift(title)
115 const ws = XLSX.utils.aoa_to_sheet(arr);
116 if (autoWidth) {
117 auto_width(ws, arr);
118 }
119 XLSX.utils.book_append_sheet(wb, ws, filename);
120 XLSX.writeFile(wb, filename + ‘.xlsx‘);
121 }
122
123 // 导出带有汉字标题的execel内容
124 export const export_array_to_excel2 = ({
125 key,
126 data,
127 title,
128 filename,
129 autoWidth
130 }) => {
131 const wb = XLSX.utils.book_new();
132 const arr = json_to_array(key, data);
133 arr.unshift(key)
134 arr.unshift(title)
135 const ws = XLSX.utils.aoa_to_sheet(arr);
136 if (autoWidth) {
137 auto_width(ws, arr);
138 }
139 XLSX.utils.book_append_sheet(wb, ws, filename);
140 XLSX.writeFile(wb, filename + ‘.xlsx‘);
141 }
142
143 export const read = (data, type) => {
144 /* if type == ‘base64‘ must fix data first */
145 // const fixedData = fixdata(data)
146 // const workbook = XLSX.read(btoa(fixedData), { type: ‘base64‘ })
147 const workbook = XLSX.read(data, {
148 type: type
149 });
150 const firstSheetName = workbook.SheetNames[0];
151 const worksheet = workbook.Sheets[firstSheetName];
152 const header = get_header_row(worksheet);
153 const results = XLSX.utils.sheet_to_json(worksheet);
154 return {
155 header,
156 results
157 };
158 }
159
160 export const readesxle = async (file, header, jsointitle) => {
161 return new Promise(function (resolve, reject) {
162 const resultdata = {
163 ErrCode: "9",
164 ErrText: ‘导入文件格式不正确。‘,
165 Rows: []
166 }
167 const fileExt = file.name.split(‘.‘).pop().toLocaleLowerCase()
168 if (fileExt === ‘xlsx‘ || fileExt === ‘xls‘) {
169 const reader = new FileReader();
170
171 const thisXLSX = XLSX;
172 const thisheader = header;
173 const thisjsointitle = jsointitle;
174 reader.readAsArrayBuffer(file)
175 reader.onloadstart = e => {}
176 // reader.onprogress = e => {
177 // this.progressPercent = Math.round(e.loaded / e.total * 100)
178 // }
179 reader.onerror = e => {
180 resultdata.ErrText = ‘文件读取出错‘;
181 resultdata.ErrCode = "1";
182 resolve(resultdata);
183 }
184 reader.onload = e => {
185 const data = e.target.result
186 const
187 workbook = thisXLSX.read(data, {
188 type: "array"
189 });
190 let tempFlag = true;
191
192 const firstSheetName = workbook.SheetNames[0];
193 const worksheet = workbook.Sheets[firstSheetName];
194 const sheetsheader = get_header_row(worksheet);
195 const sheetarray = thisXLSX.utils.sheet_to_json(worksheet);
196
197 thisheader.forEach((item, index) => {
198 if (sheetsheader.findIndex(x => x == item) == -1) {
199 tempFlag = false
200 }
201 });
202 if (tempFlag) {
203 let sheetresult = [];
204 for (let i = 0; i < sheetarray.length; i++) {
205 sheetresult.push({});
206 for (let j = 0; j < thisheader.length; j++) {
207 if (sheetarray[i][thisheader[j]] == undefined || sheetarray[i][thisheader[j]] == null)
208 sheetresult[i][thisjsointitle[j]] = "";
209 else
210 sheetresult[i][thisjsointitle[j]] = sheetarray[i][thisheader[j]];
211 }
212 }
213 resultdata.ErrCode = "0";
214 resultdata.EErrText = "文件导入成功";
215 resultdata.Rows = sheetresult;
216 } else {
217 resultdata.ErrCode = "1";
218 resultdata.EErrText = "导入文件格式不正确。";
219 resultdata.Rows = [];
220 }
221 resolve(resultdata);
222 }
223 } else {
224 resultdata.ErrCode = "1";
225 resultdata.ErrText = ‘文件：‘ + file.name + ‘不是EXCEL文件，请选择后缀为.xlsx或者.xls的EXCEL文件。‘;
226 resolve(resultdata);
227 }
228 })
229 }
230
231 export default {
232 export_table_to_excel,
233 export_array_to_excel,
234 export_json_to_excel,
235 export_array_to_excel2,
236 read,
237 readesxle
238 }

3.导出pdf