如何自定义PrintJS的iFrame中打印、取消操作按钮的样式

PrintJS生成的打印弹窗iframe属于独立文档上下文，外部页面的CSS无法直接作用到内部元素，可通过以下两种方案实现自定义按钮样式：

方案1：使用内置style配置项（推荐） #

PrintJS 提供了原生的style参数，传入的自定义CSS字符串会自动注入到iframe的头部，无需手动操作DOM：

printJS({
  printable: '打印区域的元素ID',
  type: 'html',
  // 自定义样式部分
  style: `
    /* 统一修改两个按钮的基础样式 */
    .cr-button {
      border-radius: 8px;
      padding: 6px 20px;
      font-size: 14px;
      border: none;
      cursor: pointer;
    }
    /* 自定义打印确认按钮样式 */
    .cr-button.action-button {
      background-color: #1677ff;
      color: #ffffff;
      margin-right: 12px;
    }
    .cr-button.action-button:hover {
      background-color: #4096ff;
    }
    /* 自定义取消按钮样式 */
    .cr-button.cancel-button {
      background-color: #ffffff;
      color: #333333;
      border: 1px solid #d9d9d9;
    }
    .cr-button.cancel-button:hover {
      background-color: #f5f5f5;
    }
  `
})

方案2：手动注入样式到iframe #

如果部分版本的PrintJS中style配置不生效，可以通过监听加载事件手动插入样式：

printJS({
  printable: '打印区域的元素ID',
  type: 'html',
  onLoadingStart: function() {
    // 短延时保证iframe完成初始化
    setTimeout(() => {
      const printIframe = document.getElementById('printJS')
      if (!printIframe) return
      const iframeDoc = printIframe.contentDocument || printIframe.contentWindow.document
      // 创建自定义样式节点
      const styleNode = iframeDoc.createElement('style')
      styleNode.textContent = `
        .cr-button {
          border-radius: 8px;
          padding: 6px 20px;
          font-size: 14px;
        }
        .cr-button.action-button {
          background-color: #1677ff !important;
          color: #fff !important;
        }
        .cr-button.cancel-button {
          background-color: #fff !important;
          color: #333 !important;
        }
      `
      iframeDoc.head.appendChild(styleNode)
    }, 50)
  }
})

注意事项 #

• 若自定义样式未生效，可在CSS属性后添加!important提升优先级，覆盖PrintJS默认样式
• 上述方案对html、pdf、image等所有打印类型均通用，仅需对应修改type配置即可

内容的提问来源于stack exchange，提问作者JMB