第一步:下载两个包。
npm install file-saver
npm install xlsx
// 我用的是yarn
yarn add file-saver
yarn add xlsx
第二步:封装一个方法,方便下载调用
import * as XLSX from 'xlsx'
import { saveAs } from 'file-saver'
/**
name:下载下来的文件叫啥.xlsx
tableName: 需要下载的table的ID
*/
export const exportExcel = (name: string, tableName: string) => {
let worksheet = XLSX.utils.table_to_sheet(document.querySelector(tableName), { raw: true });
let workbook = XLSX.utils.book_new();
let wscols = [
{ wch: 25 },
{ wch: 20 },
{ wch: 20 },
{ wch: 20 },
{ wch: 25 },
{ wch: 25 },
{ wch: 25 }
];
worksheet['!cols'] = wscols;
XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet');
let selIn = XLSX.write(workbook, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
saveAs(new Blob([selIn], { type: 'application/octet-stream' }), name); // time_date 所选日期
} catch (e) {
console.log(e, workbook);
}
return selIn
}
第三步:组件中调用
import { exportExcel } from '@/utils/exportExcel'
const handleDownload = () => {
exportExcel('XXXXXX.xlsx', '#table')
}
打完收工,有不对的地方,请各路大佬指正,咱们相互交流,互相学习