背景

1. luckysheet 还没有实现打印
2. luckysheet 暴露了一个 getScreenshot 方法，可以返回表格指定选区的base64格式的截图
3. luckysheet，点击表格左上角可以实现全选功能
4. 利用 vue-print-nb 第三方库，调用系统打印

思路

点击打印按钮：
第一步：实现全选；
第二步：生成选区的截图；
第三步：根据选区生成打印内容，并调用系统打印

效果图

01.png

点击01图片中的 打印按钮后 的效果.png

代码实现

<template>
    <div class="layout">
        <div class="layout-right">
            <div class="block">
                <div class="download">
                    <a v-if="reportCode != null" download="xxx.xlsx">
                        <el-button @click="download('gaea_template_excel')" type="success" plain>导出excel</el-button>
                    </a>
                    <div v-if="reportCode != null">
                      <el-button @click="printFn" type="success" plain v-print="'#print_html'">打印</el-button>
                    </div>
                </div>

                <el-form>
                    <h2>表格查询</h2>
                    <div v-for="(item, num) in tableData2" :key="num + 'excel'">
                        <h4>{{ item.name }}</h4>
                        <div v-for="(son, y) in item.children" :key="y + 'excel2'" class="search_input">
                            <label>{{ son.name }}：</label>
                            <el-input v-model="son.value" />
                        </div>
                    </div>
                    <el-button style="width: 100%" @click="searchPreview" type="primary" plain>查询</el-button>
                </el-form>
            </div>
        </div>

        <div class="layout-middle">
            <div id="luckysheet" />
        </div>

        <div id="print_html" style="text-align: center;"></div>
    </div>
</template>

<script>
export default {
    methods: {
        //初始化表格
        createSheet(){
            // 整体配置
            const options = {
                container: 'luckysheet', // 设定DOM容器的id
                title: '报表设计', // 设定表格名称
                lang: 'zh', // 设定表格语言
                plugins:['chart'],
                data:[
                    {
                        "name": "report", //工作表名称
                        "color": "", //工作表颜色
                        "index": 0, //工作表索引
                        "status": 1, //激活状态
                        "order": 0, //工作表的下标
                        "hide": 0,//是否隐藏
                        "row": 36, //行数
                        "column": 18, //列数
                        "defaultRowHeight": 19, //自定义行高
                        "defaultColWidth": 73, //自定义列宽
                        "celldata": [], //初始化使用的单元格数据
                        "config": {
                            "merge":{}, //合并单元格
                            "rowlen":{}, //表格行高
                            "columnlen":{}, //表格列宽
                            "rowhidden":{}, //隐藏行
                            "colhidden":{}, //隐藏列
                            "borderInfo":{}, //边框
                            "authority":{}, //工作表保护
                        },
                        "scrollLeft": 0, //左右滚动条位置
                        "scrollTop": 315, //上下滚动条位置
                        "luckysheet_select_save": [], //选中的区域
                        "calcChain": [],//公式链
                        "isPivotTable":false,//是否数据透视表
                        "pivotTable":{},//数据透视表设置
                        "filter_select": {},//筛选范围
                        "filter": null,//筛选配置
                        "luckysheet_alternateformat_save": [], //交替颜色
                        "luckysheet_alternateformat_save_modelCustom": [], //自定义交替颜色
                        "luckysheet_conditionformat_save": {},//条件格式
                        "frozen": {}, //冻结行列配置
                        "chart": [], //图表配置
                        "zoomRatio":1, // 缩放比例
                        "image":[], //图片
                        "showGridLines": 1, //是否显示网格线
                        "dataVerification":{} //数据验证配置
                    }
                ],

                // 行数和列数都设置为1可以自动去掉空的单元格
                row: 1,
                column: 1,

                // 是否显示顶部信息栏
                showinfobar: false,
                // 是否显示公式栏
                sheetFormulaBar: false,
                // 是否显示底部sheet页按钮
                // showsheetbar: false,
                // 是否显示工具栏
                showtoolbar: false,
                // 允许添加行
                enableAddRow: false,
                // 允许回到顶部
                enableAddBackTop: false,
                // 不允许编辑
                allowEdit: false,
                // 去掉行号列
                rowHeaderWidth: 0,
                // 去掉列号行
                columnHeaderHeight: 0,

                // 底部sheet页配置
                showsheetbarConfig: {
                    add: false, // 添加sheet
                    menu: false, // sheet菜单
                    sheet: true, // sheet页
                },
                // sheet页右击菜单
                sheetRightClickConfig: {
                    delete: false, // 删除
                    copy: false, // 复制
                    rename: false, //重命名
                    color: false, //更改颜色
                    hide: false, //隐藏，取消隐藏
                    move: false, //向左移，向右移
                },
                
            };

            this.filterFn(); // 过滤数据（去掉空白的行和列）
            options.data = this.sheetData; // 工作表配置(也就是每个sheet表)

            $(function () {
                luckysheet.create(options);
            });
        },
        // 打印
        printFn() {
            // 1. 实现全选
            $('#luckysheet-left-top').click();
            // 2. 生成选区的截图
            let src = luckysheet.getScreenshot();
            let $img = `<img src=${src} style="max-width: 90%;" />`
            this.$nextTick(() => {
                document.querySelector('#print_html').innerHTML = $img;
            })
            // 3. 调用系统打印：已经用v-print指令绑定在打印按钮上
        },

    }
}
</script>