Luckysheet的打印

发表于2023-04-13更新于2023-04-13字数统计432阅读时长3分

官方未支持打印功能，因此基于vue-print-nb开发打印功能的过程如下：

导入依赖

1
npm install vue-print-nb --save

打印方法

1
2
3
4
5
6
7
8
9
10
11
12
handlePrint() {
  // 1. 自动识别有内容的区域边界
  let RowColumn = this.getExcelRowColumn() // 获取有值的行和列
  RowColumn.column[0] = 0 //因需要打印左边的边框，需重新设置
  luckysheet.setRangeShow(RowColumn) // 进行选区操作
  // 2. 生成选区的截图
  let src = luckysheet.getScreenshot();
  let $img = `<img src=${src} style="max-width: 100%;"  alt=""/>`
  this.$nextTick(() => {
    document.querySelector('#luckysheet').innerHTML = $img;
  })
},

这里如果不识别出有内容的区域，则打印的时候会将整个表格打印出来，这样如果内容部分比较少，那么打印的效果会非常不好。因此首先需要自动识别有内容的区域边界。

然后使用luckysheet.getScreenshot方法获取选区（有内容的选区）截图。

最后使用document.querySelector('id')将图片数据赋值过去，这里一定要将’id’值指定清楚。

其中，自动识别方法getExcelRowColumn代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
getExcelRowColumn() {
  const sheetData = luckysheet.getSheetData();
  let objRowColumn = {
    row: [null, null], //行
    column: [null, null], //列
  };
  sheetData.forEach((item, index) => {
    //行数
    item.forEach((it, itemIndex) => {
      if (it !== null) {
        if (objRowColumn.row[0] == null) objRowColumn.row[0] = index; // row第一位
        objRowColumn.row[1] = index; //row第二位
        if (objRowColumn.column[0] == null)
          objRowColumn.column[0] = itemIndex; //column第一位
        objRowColumn.column[1] = itemIndex; //column第二位
      }
    });
  });
  return objRowColumn;
},

方法定义完后，再定义按钮：

1
2
3
4
5
6
7
8
9
10
<el-button
  plain
  type="warning"
  icon="el-icon-printer"
  size="mini"
  @click="handlePrint"
  v-print="'#luckysheet'"
  v-hasPermi="['template:sheet:print']"
>打印
</el-button>

注意，这里就需要使用v-print绑定对应的id。

效果

打印