javascript - 在 chrome 预览对话框中设置自定义页面大小以进行打印

Question

我会尽可能说清楚。我有一个包含图像和文本的 svg 代码(在 div 内)。我需要 svg 代码具有特殊的宽度和高度；特别是，我需要它们为 190 x 250 毫米。我已经通过将 925px 分配给宽度(因为我使用从 mm 到 px 的在线转换器)和 700px 分配给高度来设置它。

问题是，当我在 Chrome 上打开文件并继续打印 (Cmd + P) 时，打印对话框打开，它显示我的设计将打印在 A4 纸上。我有一张自定义纸张(在现实生活中，物理上)具有之前评论过的尺寸，所以这就是为什么我需要它，当我打开打印对话框(cmd + p)时，出现 190x250mm 纸张(而不是“添加”的 A4 "那个空格)

我有一台 Mac，打开打印对话框后，我可以点击“显示更多选项”之类的东西，然后设置我真正想要的纸张尺寸。然而，当我用它打印时，我的设计并没有覆盖 100% 的纸张。

我已经尝试过的是，使用 jspdf 库，将我的 svg 转换为具有我想要的确切尺寸的 pdf。仅当在 svg 上使用常见字体(arial、times new roman 等)时才有效，但如果我使用特殊字体则无效。

我真的非常感谢这里的一些帮助。非常感谢，对不起我的英语。希望你能理解 !

This is my svg design - simplified

This is what happen (and what i don't want to

编辑: 这就是我想要的以便能够打印(注意打印预览如何“适合”自定义纸张尺寸)。 (图片当然是编辑过的)

What i need

Answer 1

我需要向@page 添加负边距以移除白色边框。但是打印商可能会决定他们想要那个边距。

*{
  margin:0;
  padding:0;
}
svg{max-width:100vh;}

@media print{
  @page{
    margin:-1em;
    padding:0;
    width:100%;
  }
  svg {
       margin:0;
       width:100%;
    }
}

<svg viewBox = "0 0 100 60">
  <rect width="100" height="100" fill="pink" />
  <text dominant-baseline="central" text-anchor="middle" x="50" y="30">TEXT</text>
</svg>