vue 搭配 lucksheet 实现打印功能

BangD

已于 2023-03-22 21:50:31 修改

阅读量1.5k

点赞数 2

文章标签： javascript html 前端

于 2023-03-22 21:38:54 首次发布

本文链接：https://blog.csdn.net/BangD/article/details/129719559

版权

lucksheet 打印表格内容：

1. 使用getScreenshot 方法，可以返回表格指定选区的base64格式的截图

let src = luckysheet.getScreenshot();

2. luckysheet，点击表格左上角可以实现全选功能：

$('#luckysheet-left-top').click();

3. 创建一个img标签，储存截图

let $img = `<img src=${src} style="max-width: 90%;" />`

4. 打印区域填充上图片

this.$nextTick(() => {
document.querySelector('#print_html').innerHTML = $img;
})

template部分：

一个下载按钮

<el-button @click="printFn" type="success" plain v-print="'#print_html'">打印</el-button>

一个打印区域

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

另外一种方式

<el-button @click="printFn" type="success" plain v-print="'print">打印</el-button>

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

在data中定义print

data() {

        return {

                print:{

                       id: "print_html";

                }       

        }

}

<template>
    <div style="margin: 0; padding: 0">
       <div style="margin: 10px">
            <el-button type="primary" icon="el-icon-edit" size="small" @click="canEdit">
                编辑模板
            </el-button>
             <!-- <el-button type="primary" size="small" @click="setTemplateData">保存模板</el-button>  -->
            <el-button type="primary" size="small" @click="getJ">获取数据</el-button>
            <el-button @click="printFn" type="primary" plain v-print="print">打印</el-button>
            <el-button @click="exportPDF" type="success" plain>导出pdf</el-button>
            <div id="print_html" style="text-align: center;"></div>
        </div>

        <el-button @click="pdfDownload">下载</el-button>

        <div
            id="luckysheet"
            style="margin:0px;padding:0px;position:absolute;width:90%;height:80%;left: 0px;top: 60px;"
        ></div>
    </div>
</template>
<script>
// import { getLuckySheet, updata } from '@/api/http.js';
export default {
    name: 'ShiftSchedule',
    components: {},
    data() {
        return {
            grid_Key: 'demo',
            // 打印配置
            print: {
                id: 'print_html', //id
                popTitle: 'printMe', //自定义设置标题
            },
            options: {
                container: 'luckysheet',
                title: '电子表格',
                lang: 'zh', // 简体中文("zh")、英文("en")、繁体中文("zh_tw")和西班牙文("es")
                row: 30,
                column: 30,
                // allowUpdate: true, //是否允许操作表格后的后台更新
                // forceCalculation: true, // 强制刷新公式
                // autoFormatw: true, // 自动格式化超过4位数的数字为‘亿万格式’
                // accuracy:  //设置精度，小数点后的位数。传参数为数字或数字字符串
                allowCopy: true, // 是否允许拷贝
                showinfobar: true, // 是否显示顶部信息栏
                showtoolbar: false, // 是否显示工具栏
                showtoolbarConfig: {
                    undoRedo: true, //撤销重做，注意撤消重做是两个按钮，由这一个配置决定显示还是隐藏
                    paintFormat: true, //格式刷
                    currencyFormat: false, //货币格式
                    percentageFormat: false, //百分比格式
                    numberDecrease: true, // '减少小数位数'
                    numberIncrease: true, // '增加小数位数
                    moreFormats: false, // '更多格式'
                    font: true, // '字体'
                    fontSize: true, // '字号大小'
                    bold: true, // '粗体 (Ctrl+B)'
                    italic: false, // '斜体 (Ctrl+I)'
                    strikethrough: false, // '删除线 (Alt+Shift+5)'
                    underline: false, // '下划线 (Alt+Shift+6)'
                    textColor: true, // '文本颜色'
                    fillColor: true, // '单元格颜色'
                    border: true, // '边框'
                    mergeCell: true, // '合并单元格'
                    horizontalAlignMode: false, // '水平对齐方式'
                    verticalAlignMode: false, // '垂直对齐方式'
                    textWrapMode: false, // '换行方式'
                    textRotateMode: false, // '文本旋转方式'
                    image: false, // '插入图片'
                    link: false, // '插入链接'
                    chart: false, // '图表'（图标隐藏，但是如果配置了chart插件，右击仍然可以新建图表）
                    postil: false, //'批注'
                    pivotTable: false, //'数据透视表'
                    function: false, // '公式'
                    frozenMode: false, // '冻结方式'
                    sortAndFilter: false, // '排序和筛选'
                    conditionalFormat: false, // '条件格式'
                    dataVerification: false, // '数据验证'
                    splitColumn: false, // '分列'
                    screenshot: false, // '截图'
                    findAndReplace: false, // '查找替换'
                    protection: false, // '工作表保护'
                    print: false, // '打印'
                },
                showsheetbar: false, // 是否显示底部sheet页按钮
                showsheetbarConfig: {
                    // 自定义配置底部sheet页按钮
                    add: false, //新增sheet
                    menu: false, //sheet管理菜单
                    sheet: false, //sheet页显示
                },
                showstatisticBar: false, // 是否显示底部计数栏
                showstatisticBarConfig: {
                    count: false, // 计数栏
                    view: false, // 打印视图
                    zoom: false, // 缩放
                },
                enableAddRow: true, // 允许添加行
                enableAddBackTop: true, // 允许回到顶部
                userInfo: false, // 右上角的用户信息展示样式
                devicePixelRatio: 1, // 设备比例，比例越大表格分辨率越高
                cellRightClickConfig: {
                    copy: true, // 复制
                    copyAs: false, // 复制为
                    paste: false, // 粘贴
                    insertRow: false, // 插入行
                    insertColumn: false, // 插入列
                    deleteRow: false, // 删除选中行
                    deleteColumn: false, // 删除选中列
                    deleteCell: false, // 删除单元格
                    hideRow: false, // 隐藏选中行和显示选中行
                    hideColumn: false, // 隐藏选中列和显示选中列
                    rowHeight: false, // 行高
                    columnWidth: false, // 列宽
                    clear: false, // 清除内容
                    matrix: false, // 矩阵操作选区
                    sort: false, // 排序选区
                    filter: false, // 筛选选区
                    chart: false, // 图表生成
                    image: false, // 插入图片
                    link: false, // 插入链接
                    data: false, // 数据验证
                    cellFormat: false, // 设置单元格格式
                },
                sheetRightClickConfig: { // 自定义配置sheet页右击菜单
                    delete: false, // 删除
                    copy: false, // 复制
                    rename: false, //重命名
                    color: false, //更改颜色
                    hide: false, //隐藏，取消隐藏
                    move: false, //向左移，向右移
                },
                // sheetFormulaBar: true, // 是否显示公式栏
                // defaultFontSize: 12 , // 初始化默认字体大小
                // data: [{ "name": "Sheet1", color: "", "status": "1", "order": "0", "data": [], "config": {}, "index":0 }, { "name": "Sheet2", color: "", "status": "0", "order": "1", "data": [], "config": {}, "index":1 }, { "name": "Sheet3", color: "", "status": "0", "order": "2", "data": [], "config": {}, "index":2 }],
                // plugins: ['chart'], // 配置插件，支持图表
                
            },
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            window.luckysheet.create(this.options);
        },
        pdfDownload() {
            this.getPdf('filename', 'print_html');
        },
        // 打印
        printFn() {
            // 1. 实现全选
            window.$('#luckysheet-left-top').click();
            // 2. 生成选区的截图
            let src = window.luckysheet.getScreenshot();
            let $img = `<img src=${src} style="max-width: 90%;" />`;
            this.$nextTick(() => {
                document.querySelector('#print_html').innerHTML = $img;
            });
            // 3. 调用系统打印：已经用v-print指令绑定在打印按钮上
        },
        exportPDF() {
            // 1. 实现全选
            window.$('#luckysheet-left-top').click();
            // 2. 生成选区的截图
            let src = window.luckysheet.getScreenshot();
            let $img = `<img src=${src} style="max-width: 90%;" />`;
            this.$nextTick(() => {
                document.querySelector('#print_html').innerHTML = $img;
                // 把print_html作为id传出
                this.getPdf('111', 'print_html');
            });
        },
        getJ() {
            this.$refs['helloRef'].getJson();
        },
        canEdit() {
            // this.initOptions.allowEdit = true;
            this.$set(this.initOptions, 'allowEdit', true);
        },
        // async getData() {
        //     const res = await getLuckySheet();
        //     console.log(res.data);
        //     this.$set(this.options, 'data', res.data);
        //     this.createSheet();
        // },
        // async setTemplateData() {
        //     var objsheet = luckysheet.getAllSheets()[0];
        //     var strsheet = JSON.stringify(objsheet);
        //     const sheetinfo = { gridkey: this.grid_Key, data: strsheet };
        //     const res = await updata(sheetinfo);
        //     console.log(res);
        // },
    },
};
</script>
<style>
@page {
    size: auto;
    margin: 0mm;
}

/* .procedure{
      word-wrap:break-word;
   } */
</style>
<style scoped></style>