废话不多说,咱直接的上代码
第一步:通过插槽实现打印按钮,通过row 来获取当行数据
<template slot-scope="{ type, size, row, index }" slot="menu">
<el-button
type="text"
icon="el-icon-edit"
:size="size"
@click="printTest(row, index)"
>打印</el-button
>
<el-button v-else type="text" size="mini"></el-button>
</template>
第二步:先选择模板,下载模板后,直接跳转到打印的界面,数据会直接渲染到模板中。
async excelFileMethod(e) {
var _this = this;
// excel文件信息
const files = e.target.files;
console.log(files);
// 构建fileReader对象
const fileReader = new FileReader();
fileReader.onload = function (ev) {
try {
var jsonString = event.target.result;
//转换json
var jsonData = JSON.parse(jsonString);
_this.printTest(this.inboundForm, 0, jsonData);
} catch (e) {
//TODO handle the exception
}
};
fileReader.readAsText(files[0]);
},
async printTest(form, index, data) {
if (typeof data === "undefined") {
this.inboundForm = form;
this.$refs.fileRef.dispatchEvent(new MouseEvent("click"));
return;
}
const printData = await this.setPrintData(this.inboundForm);
console.log(printData);
this.$router.push({
path: "我这里是直接跳转到模板的界面,直接把数据渲染到打印的模板上",
query: {
printData: printData,
template: data,
},
});
},