純粋なフロントエンドvueを使用してテーブルをエクスポートする方法
1441 ワード
1、インストール依存インストール依存xlsx、file-saver
npm install --save xlsx file-saver 2.コンポーネントにimport FileSaver from"file-saver"import XLSX from"xlsx"3を導入する.ダウンロードメソッド#out-tableをtableノードとするidを追加
/* generate workbook object from table/let fix = document.querySelector(’.el-table__fixed’); let wb; if (fix) { wb = XLSX.utils.table_to_book(document.querySelector("#out-table").removeChild(fix)); document.querySelector("#out-table").appendChild(fix); } else { wb = XLSX.utils.table_to_book(document.querySelector("#out-table")); }/get binary string as output */let wbout = XLSX.write(wb, { bookType: ‘xlsx’, bookSST: true, type: ‘array’ });
try { FileSaver.saveAs(new Blob([wbout], { type: ‘application/octet-stream’ }), ‘file.xlsx’); } catch (e) { if (typeof console !== ‘undefined’) console.log(e, wbout) } return wbout;
npm install --save xlsx file-saver 2.コンポーネントにimport FileSaver from"file-saver"import XLSX from"xlsx"3を導入する.ダウンロードメソッド#out-tableをtableノードとするidを追加
outTab () {
/* generate workbook object from table */
let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
/* get binary string as output */
let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
} catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
return wbout
},
4.注意点el-tableのfilex属性を使用すると、2つのデータ解決方法が生成されます./* generate workbook object from table/let fix = document.querySelector(’.el-table__fixed’); let wb; if (fix) { wb = XLSX.utils.table_to_book(document.querySelector("#out-table").removeChild(fix)); document.querySelector("#out-table").appendChild(fix); } else { wb = XLSX.utils.table_to_book(document.querySelector("#out-table")); }/get binary string as output */let wbout = XLSX.write(wb, { bookType: ‘xlsx’, bookSST: true, type: ‘array’ });
try { FileSaver.saveAs(new Blob([wbout], { type: ‘application/octet-stream’ }), ‘file.xlsx’); } catch (e) { if (typeof console !== ‘undefined’) console.log(e, wbout) } return wbout;