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

【问题标题】：Set custom page size in chrome preview dialog for print在 chrome 预览对话框中设置自定义页面大小以进行打印
【发布时间】：2018-12-30 00:18:53
【问题描述】：

我会尽可能清楚。我有一个包含图像和文本的 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

【问题讨论】：

您应该添加您的 svg 代码，以及您可能拥有的任何其他代码。
Possible to force printer setup (paper size) in javascript?的可能重复
您好，感谢您的回复。我不确定我的代码是否有帮助，它是一个简单的图像和一个宽度为 975 像素、高度为 700 的文本！如果您认为会，请告诉我，我会添加它。 @HereticMonkey，我已经看到了一些回复，当然，试试他们说的话。当我添加东西来修改 \@page 时，我没有看到打印预览显示的纸张大小有任何变化。但是，我在想，在发送打印后可以看到更改。我不确定，现在，今天，我无法进行测试（我现在没有打印机）。

标签： javascript html css svg

【解决方案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>

【讨论】：

您好，谢谢您的回答。但是我认为你误解了我想说的话（我不怪你，我的英语很烂！）。我添加了我需要的新图像。我不想将打印机的边距设置为 0；并且可以通过添加一些 *{margin:0} 轻松去除白色边框。在您发送的示例中，“大纸”是 A4，我想将其设置为自定义尺寸。
感谢您的反馈。我从你的图片中得知你说的是西班牙语。这只是为了让您知道有一个Spanish Stack Overflow，您可以在其中用西班牙语提问。