javascript - 使用浏览器打印功能生成自定义大小的pdf

Question

我有一个允许用户编辑在线名片的应用程序。一旦用户输入了他们的详细信息，我想将名片下载为 pdf 格式。我的问题是，当我下载 pdf 时，它采用标准 A4 尺寸而不是我的名片尺寸，因此很难直接打印。如何定义 pdf 尺寸以匹配我的名片尺寸？请检查此链接

http://thecardguys.co.ke/modules/onecard.php?cardid=100&side=1

我尝试了以下 css 规则

#printarea {
position: relative;
margin: 0 auto;
width: 400px;
}
   body,html
    {
   width:400px;
   margin: 0 auto;
   }

Answer 1

您必须设置更多的 CSS 位以确保打印正确。

@page {
  size: 91.44mm 53.34; // set appropriately
  margin: 0;
}
@media print {
  html, body {
    width: 91.44mm; // set appropriately
    height: 53.34mm; // set appropriately
  }
  /* ... the rest of the rules ... */
}

这会告诉浏览器它应该转到什么页面大小，以及实际页面需要多少宽度和高度(以 mm 为单位)。

您还需要记住的是，要打印的页面尺寸始终与打印机装入的纸张尺寸相同。

• CSS3 Page Documentation