轉換成列印格式

七月 5, 2020 CSS, 屬性, 插件

用插件 Paper CSS 轉換

使用方式有

直接到 Github 下載
CDN

1	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css">

用 NPM 下載

1	npm install paper-css

使用方式

在 CSS 設定列印尺寸

1
2
3

@page {
  size: A4
}

在要轉換成可列印的 HTML 元素加上

<body class="A4">
  <!-- 當外層設定尺寸後，內容元素就會成為工作表的格式 -->
  <section class="sheet padding-10mm">
    
  <!-- 工作表的內容推擠 padding-**mm" 只可設定 10、15、20、25 -->
    內容一樣可用 HTML 作切版設計

  </section>

</body>

可用列印尺寸

有 A3 、 A4、 A5、名信片大小，也可到 Example 下載看看

轉成 PDF

需要先載入 Electron-pdf 插件

1	npm install --global electron-pdf

再執行轉換

1	electron-pdf 原網頁檔案檔名.html 轉換後檔名.pdf

可用的功能可以到 All Available Options 看看

[ 題外話 ] 設定為不可列印

設定方式就是在 @media print 設定當列印時要把 body 的標籤內容 不呈現

1	@media print { body { display:none } }

同理列印時只隱藏某些標籤的話，就只要設定 classname 的屬性為 display:none