將HTML頁面轉換成PDF格式的JavaScript

我正在開發HTML/JS中的Windows 8筆記記錄應用程序。將HTML頁面轉換成PDF格式的JavaScript

我可以使用畫布覆蓋圖來獲取我可以導出的圖像，但存在對齊問題。我更喜歡是否有可靠的方式導出爲PDF。需要導出的東西是嵌入在div中的一些HTML。

請注意，我有能力保存一個字節流，但我不知道如何將此HTML轉換爲PDF字節流。它必須用JavaScript來完成，但可以使用Windows 8 JS API。

該文件將包含MathJax和圖像，所以不應該有太多的對齊問題。

來源

2014-07-01 Manishearth

不知道關於PDF但在Windows 8中，您可以創建使用Webview.capturePreviewToBlobAsync（）函數的圖像。

它捕獲顯示在Web視圖中的所有內容，因爲它是直接捕獲可以在IE11中顯示的任何內容，包括MathJax。

我剛剛寫了一個簡單的示例應用程序，並能夠捕獲網站：圖像。顯然你可以使用URL或插入你自己的自定義HTML。

function printeWebViewToDiskThenDisplay() { 
     var wc = document.getElementById("webview"); 
     Windows.Storage.ApplicationData.current.localFolder.createFileAsync("webview.png", Windows.Storage.CreationCollisionOption.replaceExisting).then(function (file) { 
      file.openAsync(Windows.Storage.FileAccessMode.readWrite).then(function (stream) { 
       var capturePreview = wc.capturePreviewToBlobAsync(); 
       capturePreview.oncomplete = function (completeEvent) { 
        var inputStream = completeEvent.target.result.msDetachStream(); 
        Windows.Storage.Streams.RandomAccessStream.copyAsync(inputStream, stream).then(function() { 
         stream.flushAsync().done(function() { 
          inputStream.close(); 
          stream.close(); 
          var image = new Image(); 
          image.src = URL.createObjectURL(file); 
          result.innerHTML = ""; 
          result.appendChild(image); 
         }); 
        }); 
       }; 
       capturePreview.start(); 
      }); 
     }); 
    }

HTML看起來是這樣的：

<button id="btnPrint">Print</button> 

<div style="transform:scale(1); transform-origin:0% 0%"> 
    <x-ms-webview id="webview" src="http://cdn.mathjax.org/mathjax/latest/test/sample.html" 
        style="width: 400px; height: 400px;"> 
    </x-ms-webview> 
</div> 
<div id="result"></div>

的結果如下：

Windows 8 App