Vue实现数据表格的打印、导入、导出
数据表格打印、导入、导出数据表格打印一、实现当前页面数据打印二、实现全部页面数据打印数据表格导入一、HTML代码编写二、JavaScript代码编写三、导入数据表格JS代码编写数据表格导出一、安装相应插件二、导入依赖文件三、修改JS文件四、代码编写使用数据表格打印一、实现当前页面数据打印利用 vue-print-nb 插件1.安装npm install vue-print-nb --save2.引
·
数据表格打印、导入、导出
数据表格打印
一、实现当前页面数据打印
利用 vue-print-nb 插件
-
1.安装
npm install vue-print-nb --save
-
2.引入
// 在main.js文件中引入 import Print from 'vue-print-nb' Vue.use(Print)
-
3.使用
-
HTML部分
<template> <button v-print="printObj">打印</button> <el-table id="mytable"> .... </el-table> </template>
-
JavaScript部分
export default { data() { return { printObj: { id: "mytable", popTitle: '打印的标题', } }; } }
-
-
4.效果
二、实现全部页面数据打印
利用 print-js 插件
-
1.安装
npm install print-js --save
-
2.引入
// 在当前使用的vue文件内引用 import printJS from 'print-js'
-
3.使用
-
HTML部分
<template> <button @click="printAll">打印</button> <el-table> .... </el-table> </template>
-
JavaScript部分
export default { data() { return { } }, methods:{ async printAll(){ const res = await getdata(); this.list = res.data || []; let data = [] for (let i=0; i < this.list.length; i++) { data.push({ "field1": this.list[i].field1, "field2": this.list[i].field2, "field3": this.list[i].field3, ... }) } printJS({ printable: data, properties: [ { field: 'field1', displayName: '第一个字段', columnSize: 1 }, { field: 'field2', displayName: '第二个字段', columnSize: 1 }, { field: 'field3', displayName: '第三个字段', columnSize: 1 }, ... ], type: 'json', header: '打印的标题', // 样式设置 gridStyle: 'border: 2px solid #3971A5;', gridHeaderStyle: 'color: red; border: 2px solid #3971A5;' }) } } }
-
-
4.效果
数据表格导入
一、HTML代码编写
<template>
<div>
<el-upload class="upload-demo" action="" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
:on-change="handleExcelFileChange"
:on-exceed="handleExcelFileExceed"
:on-remove="handleExcelFileRemove"
:file-list="excelFileList"
:limit="1"
:auto-upload="false">
<el-button size="small" type="warning" plain>选择文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传 xlsx/xls 类型的文件</div>
</el-upload>
<el-button type="success" @click="handleImport()" round>导入数据</el-button>
</div>
</template>
二、JavaScript代码编写
import {
parseExcel
} from '@/utils/excelUtil.js'
export default {
data() {
return {
excelFileList: [],
excelFile: null
}
},
methods:{
handleExcelFileChange(file, fileList) {
this.excelFile = file.raw
},
handleExcelFileRemove(file, fileList) {
this.excelFile = null
},
handleExcelFileExceed(file, fileList) {
this.tip("error", "一次只能导入一个文件的数据!")
},
handleImport() {
var that = this
if (this.excelFile) {
if ((this.excelFile.type ==
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
|| (this.fileTemp.type == 'application/vnd.ms-excel')) {
parseExcel(this.excelFile).then((res) => {
console.log(res.data) // 获取解析到的数据
})
} else {
this.tip("warning", "附件格式错误,请重新选择!")
}
} else {
this.tip("warning", "请选择要导入的附件!")
}
},
tip(type, message) {
if (type !== "info") {
this.$message({
message: message,
showClose: true,
type: type
})
} else {
this.$message({
message: message,
showClose: true
})
}
}
}
}
}
三、导入数据表格JS代码编写
// 解析Excel文件工具
export function parseExcel(obj) {
let promise = new Promise(function(resolve, reject) {
var rABS = false; // 是否将文件读取为二进制字符串
var f = obj;
var reader = new FileReader();
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]]);
this.da = [...outdata]
let arr = []
this.da.map(v => {
let obj = {}
obj.field1 = v['列标题1']
obj.field2 = v['列标题2']
obj.field3 = v['列标题3']
...
arr.push(obj)
})
resolve(arr)
}
reader.readAsArrayBuffer(f);
}
if (rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
})
return promise
}
数据表格导出
一、安装相应插件
# 用来生成文件的web应用程序
npm install -S file-saver
# 电子表格格式的解析器
npm install -S xlsx
# 用于将上面引入的js文件挂在全局下
npm install -D script-loader
二、导入依赖文件
需要依赖两个相关的JS文件,将它们放在同一级目录中。
三、修改JS文件
修改Export2Excel.js文件
require('script-loader!file-saver');
require('script-loader!./Blob');
require('script-loader!xlsx/dist/xlsx.core.min');
四、代码编写使用
-
HTML部分
<template> <button @click="handleDownload">导出</button> <el-table> .... </el-table> </template>
-
JavaScript部分
export default { data() { return { } }, methods:{ handleDownload() { // 引入Export2Excel.js文件的指定函数 const {export_json_to_excel} = require('Export2Excel.js的文件地址') // 设置列标题 const tHeader = ['标题1', '标题2', '标题3', ...] // 设置列字段 const filterVal = ['field1', 'field2', 'field3', ...] // 需要导出的数据列表 const list = getData() // 进行转换 const data = list.map(v => filterVal.map(j => v[j])) // 导出数据 export_json_to_excel(tHeader, data, '导出的文件名') }) } } }
更多推荐
已为社区贡献1条内容
所有评论(0)