vue自定义打印模版
因公司需要,需要用户自定义打印模版,并生成纸质单据1.安装x-data-spreadsheetnpm install x-data-spreadsheet2.配置页面中直接引用import Spreadsheet from 'x-data-spreadsheet';import zhCN from 'x-data-spreadsheet/src/locale/zh-cn' //汉化Spreadsh
·
因公司需要,需要用户自定义打印模版,并生成纸质单据
1.安装x-data-spreadsheet
npm install x-data-spreadsheet
2.配置
页面中直接引用
import Spreadsheet from 'x-data-spreadsheet';
import zhCN from 'x-data-spreadsheet/src/locale/zh-cn' //汉化
Spreadsheet.locale('zh-cn', zhCN);
<template>
<div>
<div style="width:80%;height:100%;overflow:auto">
<div id='x-data-spreadsheet'></div>
</div>
</div>
</template>
js
data中的变量
option: {
mode: 'edit', // edit | read
showToolbar: true, // 顶部工具栏
showGrid: true,
showContextmenu: true, // 切换右键菜单显示状态
showBottomBar: false, // 底部工具栏
view: {
height: () => document.documentElement.clientHeight,
width: () => document.documentElement.clientWidth,
// width: () => document.getElementById('x-data-spreadsheet')[0].clientWidth,
},
row: {
len: 30,
height: 25,
},
col: {
len: 26,
width: 100,
indexWidth: 60,
minWidth: 60,
},
style: {
},
},
methods中的方法
this.sheetObj = new Spreadsheet("#x-data-spreadsheet", this.option)
.loadData(this.spreadsheetData) // load data
.change(res => {
});
初步使用已经完毕,运行项目,就能看到在线的excel
更多推荐
已为社区贡献2条内容
所有评论(0)