目次
2.Blob.jsとExport2Excel.jsをダウンロードしてインポートします
方法1：vue-json-excel
このメソッドは、xlsサフィックス形式をエクスポートします
1.vue-json-excelを導入します
cnpm i -S vue-json-excel2.main.jsでのグローバル登録
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)3.使用する
<!--home-->
<template>
<div class="home">
<download-excel
class="export-excel-wrapper"
:data="json_data"
:fields="json_fields"
type="xls"
worksheet="My Worksheet"
name="用户信息"
>
<el-button>导出EXCEL</el-button>
</download-excel>
</div>
</template>
<script>
export default {
data() {
return {
json_fields: {
年龄: "age", //常规字段
姓名: "info.name", //支持嵌套属性
密码: {
field: "info.phone",
//自定义回调函数
callback: value => {
return `+86 ${value}`;
}
}
},
json_data: [
{
age: 22,
info: {
name: "张三",
phone: 12222222222
},
sex: "男"
},
{
age: 23,
info: {
name: "李四",
phone: 13333333333
},
sex: "女"
}
]
// json_meta: [
// [
// {
// " key ": " charset ",
// " value ": " utf- 8 "
// }
// ]
// ]
};
}
};
</script>
<style lang="scss" scoped>
.home {
height: 100%;
background-color: rgb(128, 126, 126);
}
</style>ここでコンポーネントのさまざまなプロパティを説明します
- json_data：エクスポートされるデータ
- json_fields：エクスポートするフィールドを選択します。指定しない場合、すべてのデータセンターのすべてのフィールドがデフォルトでエクスポートされます。
| 属性名 | の種類 | 説明 |
|---|---|---|
| データ | アレイ | データをエクスポートし、中国語をサポートする必要があります |
| 田畑 | オブジェクト | エクスポートする必要のあるフィールドを定義します |
| 名前 | ストリング | Excelのファイル名をエクスポートします |
| タイプ | ストリング | Excelファイルタイプ（xls、csv）をエクスポートします。デフォルトはxlsです。 |
4.エフェクト画像
方法2：ファイルセーバー、xlsx、スクリプトローダー
1.依存関係を導入する
cnpm i -S file-saver xlsx
cnpm i -D script-loader2.Blob.jsとExport2Excel.jsをダウンロードしてインポートします
srcディレクトリにExcelファイルを作成し、その中に2つのファイルBlob.jsとExport2Excel.jsを配置します
ダウンロード リンク：https：//pan.baidu.com/s/14cYTqYx7M0oyyYawsB0jjQ抽出コード：ksnq
3.使用する
<template>
<div>
<el-button type="primary" @click="export2Excel()">导出Excel</el-button>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
tableData: [
{ index: 0, username: "张三", password: 333, age: 22 },
{ index: 1, username: "李四", password: 444, age: 23 }
]
};
},
props: {},
created() {},
mounted() {},
computed: {},
methods: {
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require("@/excel/Export2Excel");
const fieldName = ["索引", "用户名", "密码"];
const filterVal = ["index", "username", "password"];
const data = this.tableData.map(v => filterVal.map(j => v[j]));
export_json_to_excel(fieldName, data, "用户列表");
});
}
},
watch: {}
};
</script>
<style lang="scss" scoped>
</style>| パラメータ | 説明 | の種類 | オプション値 | デフォルト |
| ヘッダ | エクスポートされたデータのヘッダー | アレイ | / | [] |
| データ | エクスポートされた特定のデータ | アレイ | / | [] |
| ファイル名 | エクスポートファイル名 | ストリング | / | エクセルリスト |
| autoWidth | セルを適応幅にするかどうか | ブール値 | 真/偽 | true |
| bookType | エクスポートファイルタイプ | ストリング | xlsx、csv、txt、その他 | xlsx |
4.エフェクト画像
指定されたレコードをエクスポートする
1.依存関係を導入する
cnpm i -S file-saver xlsx
cnpm i -D script-loader2.使用する
<template>
<div>
<el-button type="primary" @click="exportExcel">导出文件</el-button>
<el-table :data="tableData" style="width: 100%" id="out-table">
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="age" label="年龄" width="80"></el-table-column>
<el-table-column prop="date" label="日期"></el-table-column>
</el-table>
</div>
</template>
<script>
//引入安装的依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
data() {
return {
tableData: [
{
name: "张三",
age: 22,
date: "2016-05-02"
},
{
name: "王小虎",
age: 23,
date: "2016-05-04"
}
]
};
},
methods: {
// XLSX.uitls.table_to_book( 放入的是table 的DOM 节点 ) ，sheetjs.xlsx 即为导出表格的名字，可修改！
exportExcel() {
let wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
let wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
"用户列表.xlsx"
);
return wbout;
}
}
};
</script>
<style scoped>
</style>3.エフェクト画像
さらに、指定されたレコードをエクスポートする場合は、次の記事を参照できます：https：//www.jianshu.com/p/2819b563bfd7