Question

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

我能够使用画布覆盖来获取我可以导出的图像，但存在对齐问题。如果有可靠的方法导出到PDF，我更喜欢。需要导出的东西是嵌入div中的一些HTML。

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

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

Answer 1

确定HTML - ＆gt; PDF并不容易，我的意思是你可以在打印对话框中手动保存为.pdf，因此支持@media print .css文件。

但是我假设您希望它自动执行更改，筛选价格过高的商业软件，我已设法找到以下内容......

https://github.com/MrRio/jsPDF

从表面上看，它应该表现出你想要的东西。

Answer 2

不确定PDF，但在Windows 8上，您可以使用Webview.capturePreviewToBlobAsync（）函数创建Image。

它捕获了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 App

您可以下载我在此处构建的粗略示例：

https://github.com/thebeebs/ASingleWebviewToImage

Answer 3

我已经使用jsPDF JS library在JS中生成PDF文件，但根据您的描述，我不确定这是否是您正在寻找的

从JavaScript将HTML页面转换为PDF

3 个答案: