如何將 Reveal.js 簡報匯出成 PDF

如何匯出？

1. 匯出頁面的 URL 加上print-pdf

http://localhost:9002/?print-pdf or http://localhost:9002/index.html?print-pdf#/

2. 確認頁面有載入特定 css 的 javascript

• 如果頁面是從 GITHUB 專案複製下來修改的可以忽略這段，預設已加入

  <!-- Printing and PDF exports -->
  <script>
  	var link = document.createElement( 'link' );
  	link.rel = 'stylesheet';
  	link.type = 'text/css';
  	link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
  	document.getElementsByTagName( 'head' )[0].appendChild( link );
  </script>
  

  

3. 在瀏覽器中按下 Ctrl+p 開啟列印視窗

4. 選擇列印目的地

4-1. Chrome 專屬的 另存為 PDF

• 54.0.2840.71 m (64-bit) 為例

  

• 1.勾選背景圖形

• 2.儲存

  

4-2. Windows 10 的虛擬印表機(Microsoft Print to PDF)

• 勾選背景圖形

  

1. Chrome

   54.0.2840.71 m (64-bit) 為例

   設定水平列印

   
   

2. FireFox

   以 Firefox 48.0.2 為例

   設定水平列印

   
   

3. IE

   以 Internet Exporer 11.633.10586.0 為例

   設定水平列印

   
   

4. Edge

   以 Microsoft Edge 25.10586.0.0 為例

   暫找不到列印背景的選項

• 列印

  

注意事項

匯出頁面的 URL 加上`print-pdf`後，瀏覽器會出現跑版，但實際產出的 PDF 是正常的

• HTML

  

• PDF

  

參考資料

1. Reveal.js(github)
2. 如何利用 Windows 10 內建 Microsoft Print to PDF 虛擬印表機來將文件列印成 PDF 檔案？