從JavaScript將HTML頁面轉換為PDF

Question

我正在用HTML / JS開發Windows 8筆記應用程序。

我可以使用畫布覆蓋獲取可導出到的圖像，但是存在對齊問題。 我希望有一種可靠的方法可以導出到PDF。 需要導出的內容是在div中嵌入的一些HTML。

請注意，我可以保存字節流，但是我不知道如何將HTML轉換為PDF字節流。 必須使用JavaScript來完成，但是可以使用Windows 8 JS API。

該文檔將包含MathJax和圖像，因此應該不會有太多的對齊問題。

Answer 1

對於HTML-> PDF，這並不容易，我的意思是，您可以在打印對話框中手動將其另存為.pdf，從而得到@media print .css文件的支持。

但是我假設您希望它自動執行更改，篩選價格昂貴的商業軟件，我設法找到了以下內容...

https://github.com/MrRio/jsPDF

從外觀上看，它應該可以滿足您的需求。

Answer 2

不確定PDF，但在Windows 8上，您可以使用Webview.capturePreviewToBlobAsync（）函數創建圖像。

它捕獲了Webview中顯示的所有內容，並且由於它是直接捕獲，因此可以捕獲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> 

結果如下：

您可以下載我在這里構建的粗略示例：

https://github.com/thebeebs/ASingleWebviewToImage

Answer 3

我已經使用jsPDF JS庫在JS中生成PDF文件，但是根據您的描述，我不確定這是否是您要查找的內容