Convert an HTML page to PDF from JavaScript

Question

I'm developing a Windows 8 note-taking app in HTML/JS.

I'm able to use a canvas overlay to get an image that I can export to, but there are alignment issues. I'd prefer if there was a reliable way to export to PDF. The stuff that needs exporting is some HTML embedded in a div.

Note that I have the ability to save a byte stream, but I don't know how to convert this HTML to a PDF byte stream. It's got to be done in JavaScript, but leveraging Windows 8 JS APIs is acceptable.

The document will contain MathJax and images, so there shouldn't be too many alignment issues.

Answer 1

Ok for HTML -> PDF it's not easy, I mean you can manually save as a .pdf in a print dialog and thus supported by a @media print .css file.

However I assume you want it to perform the change automatically, sifting through ridiculously priced commercial software I've managed to find the following...

https://github.com/MrRio/jsPDF

By the looks of that, it should perform what you're looking for.

Answer 2

Not sure about PDF but on on Windows 8 you can create an Image using the Webview.capturePreviewToBlobAsync() function.

It captures everything that's displayed in the Webview and because it's a direct capture anything that can be displayed in IE11 can be captured including MathJax.

I wrote a simple sample app a moment ago and was able to capture the website: to an image. Obviously you could use a URL or insert your own custom 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 looked something like this:

<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> 

The result was the following:

You can download the rough sample I built here:

https://github.com/thebeebs/ASingleWebviewToImage

Answer 3

我已经使用jsPDF JS库在JS中生成PDF文件，但是根据您的描述，我不确定这是否是您要查找的内容