从JavaScript将HTML页面转换为PDF

debugcn 发表于 Dev

Manishearth

我正在用HTML / JS开发Windows 8笔记应用程序。

我可以使用画布覆盖图来获取可以导出到的图像，但是存在对齐问题。我希望有一种可靠的方法可以导出到PDF。需要导出的内容是在div中嵌入的一些HTML。

请注意，我可以保存字节流，但是我不知道如何将HTML转换为PDF字节流。必须使用JavaScript来完成，但是可以使用Windows 8 JS API。

该文档将包含MathJax和图像，因此应该不会有太多的对齐问题。

马丁·比比（Martin Beeby）

不确定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>

结果如下：

Windows 8应用