2016-12-17

如何將 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) 為例

    設定水平列印

    prperties prperties

  2. FireFox

    Firefox 48.0.2 為例

    設定水平列印

    perfence result2

  3. IE

    Internet Exporer 11.633.10586.0 為例

    設定水平列印

    prperties prperties

  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 檔案?

沒有留言:

張貼留言