浏览器连接客户端进行直接打印时，表格部分无边框样式失效

[breezeyyy]

如标题，打印无边框表格直接打印会导致保留了部分边框，而预览打印则样式正常。

复现： 可以通过你们的在线demo地址，设计一个完全无边框表格进行直接打印测试，相应JSON格式表现为：

{
  "tableBorder": "noBorder",
  "tableHeaderBorder": "noBorder",
  "tableHeaderCellBorder": "noBorder",
  "tableBodyRowBorder": "noBorder",
  "tableBodyCellBorder": "noBorder",
  "tableFooterBorder": "noBorder",
  "tableFooterCellBorder": "noBorder",
}

期待打印的结果

实际打印的结果

看起来是打印了这种样式的表格，部分设置丢失：

{
  "tableHeaderCellBorder": "noBorder",
  "tableBodyCellBorder": "noBorder",
}

环境说明： win11 x64 hiprint v1.0.7 chrome 118.0.5993.118

[Xavier9896]

@CcSimple 这个问题是不是因为 /tag/0.0.54-action 更新了 print-lock.css ，electron-hiprint 中的 print-lock.css 没有更新的原因？为了兼容旧版本号，现在的写法是在 api 里面加 styleHandler 是吧。

[CcSimple]

嗯嗯，是的。客户端的 print-lock.css 没有更新

[Xavier9896]

@breezeyyy 你应该用 styleHandler 引入 0.0.54 之后的 print-lock.css 解决这个问题

// 直接打印
hiprintTemplate.print2(this.printData, {
  styleHandler: () => {
    // 这里拼接成放html->head标签内的css/style
    // 1.例如：使用最新的样式
    let css = '<link href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css" media="print" rel="stylesheet">'
    // 2.重写样式：所有文本红色
    css += '<style>.hiprint-printElement-text{color:red !important;}</style>'
    return css
  }
})

[breezeyyy]

@breezeyyy 你应该用 styleHandler 引入 0.0.54 之后的 print-lock.css 解决这个问题

// 直接打印
hiprintTemplate.print2(this.printData, {
  styleHandler: () => {
    // 这里拼接成放html->head标签内的css/style
    // 1.例如：使用最新的样式
    let css = '<link href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css" media="print" rel="stylesheet">'
    // 2.重写样式：所有文本红色
    css += '<style>.hiprint-printElement-text{color:red !important;}</style>'
    return css
  }
})

试了使用 api 的形式引入样式，并未生效。不确定是否引入成功（引入的 css 地址和 link 的其余属性都试了，都不行）

if (hiprint.hiwebSocket.opened) {
      hiprintTemplate.print2(data, {
        styleHandler: () => {
          // 这里拼接成放html->head标签内的css/style
          // 1.例如：使用最新的样式
          let css =
            '<link href="https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css" media="print" rel="stylesheet" type="text/css">'
          // 2.重写样式：所有文本红色
          css +=
            '<style>.hiprint-printElement-text{color:red !important;}</style>'
          return css
        },
      })
    }

目前解决方式是我在本地单独维护一版客户端，保证是最新的 print-lock.css 文件，试了打印结果是可以的。 不知道你们是否已验证 api 方式的 styleHandler 可行，肯定还是优先沿用你们的解决方案的。

[Xavier9896]

styleHandler 应该是可以解决该问题的，有可能是 jsdelivr 的 cdn 没法在 electron-hiprint 中被加载，可以尝试用别的 cdn 或自建的 对象存储试试（你自己项目 public 路径下的 print-lock.css 也是可以的，需要写线上的地址）。如果可以的话建议你尝试一下，我和 CcSimple 暂时都没时间去验证这个问题，如果验证过确实解决不了，我之后会尝试在 electron-hiprint 中根据 vue-plugin-hiprint 版本切换 print-lock.css

[breezeyyy]

之前也试了我线上地址，那应该是这个 cdn 和 我线上的地址（内网环境）都没法在 electron-hiprint 中被加载的缘故。 目前我本地克隆的这版客户端单独处理 print-lock.css 文件，是解决方式最方便快捷的了。 最后，感谢你们的回答，帮助很大。