この記事では、主にテーブル内の既存のデータに基づいてフロントエンドによって実装されるダウンロード機能を紹介します。インターフェイスを呼び出す必要はなく、純粋なフロントエンドの機能です。ちなみに、紹介します。印刷機能。
1.印刷
フォームデータを取得し、ウィンドウのprintメソッドを呼び出します。印刷後にページを更新し、フォームに値を再割り当てします。
<template>
<div>
<el-button @click="printTable">打印表格</el-button>
<el-table id="myTable" :data="tableData">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
export default {
data(){
return {
tableData:[{
date:'xxxx',name:'aaaa',address:'ssss'}]
}
},
methods:{
//打印页面内容
printTable(){
let wpt = document.querySelector('#myTable');
let newContent = wpt.innerHTML;
let oldContent = document.body.innerHTML;
document.body.innerHTML = newContent;
window.print(); //打印方法
// window.localtion.reload();
history.go(0)
document.body.innerHTML = oldContent;
}
}
}
2.ダウンロード
プラグインxlsxとファイルセーバーを使用する必要があります;
プラグインをインストールします：
//各种电子表格格式的解析器和编写器
npm install xlsx
npm install file-saver --save
実装：
<template>
<div>
<el-button @click="downloadExcel">下载表格</el-button>
<el-table id="myTable" :data="tableData">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
export default {
data(){
return {
tableData:[{
date:'xxxx',name:'aaaa',address:'ssss'}]
}
},
methods:{
//导出Excel
exportToExcel () {
//获取 table 表格数据
let et = XLSX.utils.table_to_book(document.querySelector('#myTable')); //此处传入table的DOM节点
let etout = XLSX.write(et, {
bookType: 'xlsx',
bookSST: true,
type: 'array'
});
try {
FileSaver.saveAs(new Blob([etout], {
type: 'application/octet-stream'
}), 'trade-publish.xlsx'); //trade-publish.xlsx 为导出的文件名
} catch (e) {
console.log(e, etout) ;
}
return etout;
}
}
}
この方法で実行されるダウンロードでは、現在のテーブルに表示されているデータのみをダウンロードできます。ページングがある場合は、
