vue+导出excel报表

1.导出按钮

导出Excel

2.定义data数据
data () {
return {
dataForm: {
name: ‘’,
age: ‘’,
sex: ‘’,
},
loading: false,
exportData: [],
}
}

3.导出方法

// 导出excel
exportExcel () {
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … util.message.showInfo2(err)
})
})
},

      exportExcelMethod () {
        require.ensure([], () => {
          const { export_json_to_excel } = require('@/excel/export2Excel');
          // 这里深拷贝，修改值时不会影响到原对象
          const list = JSON.parse(JSON.stringify(this.exportData));
          const filterVal = ['name', 'age', 'sex'];
          // 取出要下载的表头字段
          const tHeader = ['姓名', '年龄', '性别'];
          // 把表头字段定义成想要的中文或英文
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, '档案监控');// 定义excel下载成功的表名
          this.$message({
            type: 'success',
            message: '导出成功!'
          });
        });
      },
      
       formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]))
        },

4.引入export2Excel.js导入文件
/* eslint-disable */
require(‘script-loader!file-saver’);
require(‘script-loader!@/excel/Blob’);
require(‘script-loader!xlsx/dist/xlsx.core.min’);
require(‘script-loader!xlsx-style/dist/xlsx.core.min’);
function generateArray(table) {
var out = [];
var rows = table.querySelectorAll(‘tr’);
var ranges = [];
for (var R = 0; R < rows.length; ++R) {
var outRow = [];
var row = rows[R];
var columns = row.querySelectorAll(‘td’);
for (var C = 0; C < columns.length; ++C) {
var cell = columns[C];
var colspan = cell.getAttribute(‘colspan’);
var rowspan = cell.getAttribute(‘rowspan’);
var cellValue = cell.innerText;
if (cellValue !== “” && cellValue == +cellValue) cellValue = +cellValue;

  //Skip ranges
  ranges.forEach(function (range) {
    if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
      for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);
    }
  });

  //Handle Row Span
  if (rowspan || colspan) {
    rowspan = rowspan || 1;
    colspan = colspan || 1;
    ranges.push({s: {r: R, c: outRow.length}, e: {r: R + rowspan - 1, c: outRow.length + colspan - 1}});
  } ;

  //Handle Value
  outRow.push(cellValue !== "" ? cellValue : null);

  //Handle Colspan
  if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);
}
out.push(outRow);

}
return [out, ranges];
};

function datenum(v, date1904) {
if (date1904) v += 1462;
var epoch = Date.parse(v);
return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}

function sheet_from_array_of_arrays(data, opts) {
var ws = {};
var range = {s: {c: 10000000, r: 10000000}, e: {c: 0, r: 0}};
for (var R = 0; R != data.length; ++R) {
for (var C = 0; C != data[R].length; ++C) {
if (range.s.r > R) range.s.r = R;
if (range.s.c > C) range.s.c = C;
if (range.e.r < R) range.e.r = R;
if (range.e.c < C) range.e.c = C;
var cell = {v: data[R][C]};
if (cell.v == null) continue;
var cell_ref = XLSX.utils.encode_cell({c: C, r: R});

  if (typeof cell.v === 'number') cell.t = 'n';
  else if (typeof cell.v === 'boolean') cell.t = 'b';
  else if (cell.v instanceof Date) {
    cell.t = 'n';
    cell.z = XLSX.SSF._table[14];
    cell.v = datenum(cell.v);
  }
  else cell.t = 's';

  ws[cell_ref] = cell;
}

}
if (range.s.c < 10000000) ws[‘!ref’] = XLSX.utils.encode_range(range);
return ws;
}

function Workbook() {
if (!(this instanceof Workbook)) return new Workbook();
this.SheetNames = [];
this.Sheets = {};
}

function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}

export function export_table_to_excel(id) {
var theTable = document.getElementById(id);
console.log(‘a’)
var oo = generateArray(theTable);
var ranges = oo[1];

/* original data */
var data = oo[0];
var ws_name = “SheetJS”;
console.log(data);

var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);

/* add ranges to worksheet */
// ws[‘!cols’] = [‘apple’, ‘banan’];
ws[‘!merges’] = ranges;

/* add worksheet to workbook */
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws;

var wbout = XLSX.write(wb, {bookType: ‘xlsx’, bookSST: false, type: ‘binary’});

saveAs(new Blob([s2ab(wbout)], {type: “application/octet-stream”}), “test.xlsx”)
}

function formatJson(jsonData) {
console.log(jsonData)
}

export function export_jt_json_to_excel(multiHeader,multiHeader2,header,data,merges,filename) {
/* original data */
var filename = filename || ‘excel-list’
var data = […data]
data.unshift(header);
for (let i = multiHeader2.length - 1; i > -1; i–) {
data.unshift(multiHeader2[i])
}
for (let i = multiHeader.length - 1; i > -1; i–) {
data.unshift(multiHeader[i])
}

var ws_name = “SheetJS”;
var wb = new Workbook(),
ws = sheet_from_array_of_arrays(data);
var cell_style_one = {
font: {
sz: 16,
color: { rgb: “000”}
},
alignment: {
horizontal: “center”,
vertical: “left”
}
}
var cell_style_two = {
font: {
sz: 13,
color: { rgb: “000”}
},
alignment: {
horizontal: “center”,
vertical: “left”
}
}
ws[‘A1’].s = cell_style_one
ws[‘A2’].s = cell_style_two
ws[‘H2’].s = cell_style_two

if (merges.length > 0) {
if (!ws[‘!merges’]) ws[‘!merges’] = [];
merges.forEach(item => {
ws[‘!merges’].push(XLSX.utils.decode_range(item))
})
}

/* add worksheet to workbook */
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws;

var wbout = XLSX.write(wb, {
bookType: ‘xlsx’,
bookSST: false,
type: ‘binary’
});
saveAs(new Blob([s2ab(wbout)], {
type: “application/octet-stream”
}), filename + “.xlsx”);
}

export function export_json_to_excel(th, jsonData, defaultTitle) {

/* original data */

var data = jsonData;
data.unshift(th);
var ws_name = “SheetJS”;

var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);

/* add worksheet to workbook */
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws;

var wbout = XLSX.write(wb, {bookType: ‘xlsx’, bookSST: false, type: ‘binary’});
var title = defaultTitle || ‘列表’
saveAs(new Blob([s2ab(wbout)], {type: “application/octet-stream”}), title + “.xlsx”)
}
export function export_json_to_excel_merges(th, jsonData, defaultTitle,merges) {

/* original data */

var data = jsonData;
data.unshift(th);
var ws_name = “SheetJS”;

var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);

/* add worksheet to workbook */
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws;

if (merges.length > 0) {
if (!ws[‘!merges’]) ws[‘!merges’] = [];
merges.forEach(item => {
ws[‘!merges’].push(XLSX.utils.decode_range(item))
})
}

var wbout = XLSX.write(wb, {bookType: ‘xlsx’, bookSST: false, type: ‘binary’});
var title = defaultTitle || ‘列表’
saveAs(new Blob([s2ab(wbout)], {type: “application/octet-stream”}), title + “.xlsx”)
}
/* 增加自适应宽度*/
export function export_json_to_excel1({
multiHeader = [],
header,
data,
filename,
merges = [],
autoWidth = true,
bookType = ‘xlsx’
} = {}) {
/* original data */
filename = filename || ‘excel-list’
data = […data]
data.unshift(header);

for (let i = multiHeader.length - 1; i > -1; i–) {
data.unshift(multiHeader[i])
}

var ws_name = “SheetJS”;
var wb = new Workbook(),
ws = sheet_from_array_of_arrays(data);

if (merges.length > 0) {
if (!ws[‘!merges’]) ws[‘!merges’] = [];
merges.forEach(item => {
ws[‘!merges’].push(XLSX.utils.decode_range(item))
})
}

if (autoWidth) {
/设置worksheet每列的最大宽度/
const colWidth = data.map(row => row.map(val => {
/先判断是否为null/undefined/
if (val == null) {
return {
‘wch’: 10
};
}
/再判断是否为中文/
else if (val.toString().charCodeAt(0) > 255) {
return {
‘wch’: val.toString().length * 2
};
} else {
return {
‘wch’: val.toString().length
};
}
}))
/以第一行为初始值/
let result = colWidth[0];
for (let i = 1; i < colWidth.length; i++) {
for (let j = 0; j < colWidth[i].length; j++) {
if (result[j][‘wch’] < colWidth[i][j][‘wch’]) {
result[j][‘wch’] = colWidth[i][j][‘wch’];
}
}
}
ws[‘!cols’] = result;
}

/* add worksheet to workbook */
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name] = ws;

var wbout = XLSX.write(wb, {
bookType: bookType,
bookSST: false,
type: ‘binary’
});
saveAs(new Blob([s2ab(wbout)], {
type: “application/octet-stream”
}), ${filename}.${bookType});
}