1, 在 vue 中使用导入导出, 需要下载 3 个依赖包和 2 个 js 包:
使用 npm 安装:
- npm install -S file-saver xlsx(这里其实安装了 2 个依赖)
- npm install -D script-loader
2, 在 src 目录下新建一个 excel 文件夹引入 Blob.js 和 expor2Excal.js
3, 在 main.js 中全局引入:
- import Blob from './excel/Blob.js'
- import Export2Excel from './excel/Export2Excel.js'
4,webpack.base.conf.js 做如下修改:
- resolve: {
- extensions: ['.js', '.vue', '.json'],
- alias: {
- 'vue$': 'vue/dist/vue.esm.js',
- '@': resolve('src'),
- 'sCSS_vars': '@/styles/vars.scss',
- 'excel': path.resolve(__dirname, '../src/excel'),// 新增加一行
- }
- },
5, 在页面中导出的时候调用 outExe:
- // 导出
- outExe() {
- this.$confirm('此操作将导出 excel 文件, 是否继续?', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }).then(() => {
- this.excelData = this.dataList // 你要导出的数据 list.
- this.export2Excel()
- }).catch(() => {
- });
- },
- export2Excel() {
- var that = this;
- require.ensure([], () => {
- const { export_json_to_excel } = require('../../excel/Export2Excel'); // 这里必须使用绝对路径 ---(一定要注意路径是否正确)
- const tHeader = ['id','withNum', 'userId', 'name','amount','status','amountIn','amountSuccess','createTime']; // 导出的表头名
- const filterVal = ['id','withNum','userId', 'name','amount','status','amountIn','amountSuccess','createTime']; // 导出的表头字段名
- const list = that.excelData;
- const data = that.formatJson(filterVal, list);
- let time1,time2 = '';
- if(this.start !== '') {
- time1 = that.moment(that.start).format('YYYY-MM-DD')
- }
- if(this.end !== '') {
- time2 = that.moment(that.end).format('YYYY-MM-DD')
- }
- export_json_to_excel(tHeader, data, `[${time1}-${time2}] 提现管理 excel`);// 导出的表格名称, 根据需要自己命名
- })
- },
- formatJson(filterVal, jsonData) {
- return jsonData.map(v => filterVal.map(j => v[j]))
- }
6, 在页面中导入的时候调用:
- // 导入
- <a href="javascript:;" class="file"> 导入表格
- <input id="upload" type="file" @change="importfxx(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
- </a>
- importfxx(obj) {
- let _this = this;
- let inputDOM = this.$refs.inputer;
- // 通过 DOM 取文件数据
- this.file = event.currentTarget.files[0];
- var rABS = false; // 是否将文件读取为二进制字符串
- var f = this.file;
- var reader = new FileReader();
- //if (!FileReader.prototype.readAsBinaryString) {
- FileReader.prototype.readAsBinaryString = function(f) {
- var binary = "";
- var rABS = false; // 是否将文件读取为二进制字符串
- var pt = this;
- var wb; // 读取完成的数据
- var outdata;
- var reader = new FileReader();
- reader.onload = function(e) {
- var bytes = new Uint8Array(reader.result);
- var length = bytes.byteLength;
- for(var i = 0; i <length; i++) {
- binary += String.fromCharCode(bytes[i]);
- }
- var XLSX = require('xlsx');
- if(rABS) {
- wb = XLSX.read(btoa(fixdata(binary)), { // 手动转化
- type: 'base64'
- });
- } else {
- wb = XLSX.read(binary, {
- type: 'binary'
- });
- }
- outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);//outdata 就是你想要的东西
- this.da = [...outdata]
- let arr = []
- this.da.map(v => {
- let obj = {}
- obj.id = v.id
- obj.status = v.status
- arr.push(obj)
- })
- console.log(arr)
- let para = {
- //withList: JSON.stringify(this.da)
- withList: arr
- }
- _this.$message({
- message: '请耐心等待导入成功',
- type: 'success'
- });
- withImport(para).then(res => {
- window.location.reload()
- })
- }
- reader.readAsArrayBuffer(f);
- }
- if(rABS) {
- reader.readAsArrayBuffer(f);
- } else {
- reader.readAsBinaryString(f);
- }
- },
来源: http://www.qdfuns.com/article/39070/ada0fb9938a7ce5cfbe52a09a2e40f8b.html