vue自定义打印模版

因公司需要，需要用户自定义打印模版，并生成纸质单据
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