[Ques]: 不同浏览器兼容相关的边框和标题问题

[stupidZhu]

Describe the Question / 问题描述

在 firefox 中都正常, 但是在 chrome/edge 中会出现 popTitle 不生效, 右侧边框消失的情况
下面是在 chrome/edge 中的表现

• 设置 popTitle 后, 打印窗口页眉正常改变, 但导出的 pdf 命名仍然是主窗口的 title
• 右侧边框消失(可以设置容器padding-right:1px; 解决), 如下图

测试代码如下

<script setup lang="ts">
import { VuePrintNext } from 'vue-print-next';
import PrintPageLayout from '../components/PrintPageLayout.vue';

function handleBasicPrint() {
  new VuePrintNext({ el: '#print-el', popTitle: 'hello world' });
}
</script>
<template>
  <PrintPageLayout
    title="基础打印示例"
    description="边框内容"
  >
    <template #buttons>
      <button class="print-btn secondary" @click="handleBasicPrint">
        <span class="btn-icon">⚙️</span> 方法打印
      </button>
    </template>
    <div id="print-el">
      <div class="print-box"></div>
      <table class="print-table">
        <tbody>
          <tr>
            <td>1</td>
            <td>2</td>
          </tr>
        </tbody>
      </table>
    </div>
  </PrintPageLayout>
</template>

<style scoped>
.print-box{
  border: 1px solid #000;
  height: 100px;
}

.print-table {
  width: 100%;
  border-radius: 0;
  border-collapse: collapse;
  th,
  td {
    border: 1px solid #000;
    padding: 8px;
  }
}
</style>

因为在 firefox 中一切正常, 可能和不同浏览器的实现有关, 不知道是否可以解决

[Alessandro-Pang]

当调用 iframe.contentWindow?.print() 时，浏览器的打印对话框会使用 iframe 内容的 title（即设置的 popTitle），但是当用户选择"另存为 PDF"时，浏览器默认使用主窗口的 document.title 作为文件名，而不是 iframe 内的 title。这是浏览器的默认行为。

你可以通过下面这种折中方案去解决：

const originalTitle = document.title;
  const customTitle = '自定义打印标题';
  new VuePrintNext({
    el: '#print-el',
    popTitle: customTitle,
    beforeOpenCallback: () => {
      document.title = customTitle;
    },
    closeCallback: () => {
      setTimeout(() => {
        document.title = originalTitle;
      }, 100);
    },
  });

至于边框消失的问题，我还需要在看一看有没有好一点的解决方案