使用jsPDF渲染PDF时如何提高高清分辨率

时间:2016-07-04 04:53:18

标签: javascript highcharts pdf-generation jspdf

基本上我想知道,在PDF上呈现Highchart的图表的最佳方法是什么?在我的情况下,我使用HighchartsjsPDF来呈现pdf。但是生成的PDF图表资源非常低。如何提高图表的分辨率

以下代码部分用于从 svg 创建 canvas 元素。有从 Highchart

获取 svg 的方法
(function (H) {
        H.Chart.prototype.createCanvas = function (divId) {
            var svg = this.getSVG(),
                    width = parseInt(svg.match(/width="([0-9]+)"/)[1]),
                    height = parseInt(svg.match(/height="([0-9]+)"/)[1]),
                    canvas = document.createElement('canvas');

            canvas.setAttribute('width', width);
            canvas.setAttribute('height', height);

            if (canvas.getContext && canvas.getContext('2d')) {

                canvg(canvas, svg);

                return canvas.toDataURL("image/jpeg");

            }
            else {
                alert("Your browser doesn't support this feature, please use a modern browser");
                return false;
            }

        }
    }(Highcharts));

然后使用jsPDF在前端渲染PDF。使用canvas上下文作为图像,并使用jsPDF库将该对象放在pdf上。方法名称为 addImage

var pdfOptions = {
            orientation: "landscape", // One of "portrait" or "landscape" (or shortcuts "p" (Default), "l")
            unit: "mm",              //Measurement unit to be used when coordinates are specified. One of "pt" (points), "mm" (Default), "cm", "in"
            format: "a4"             //One of 'a3', 'a4' (Default),'a5' ,'letter' ,'legal'
        }
        var *doc* = new jsPDF(pdfOptions);

创建jsPDF对象

doc.addPage();
var imageData = $(this).highcharts().createCanvas();
doc.addImage(imageData, 'JPEG', left, top, charWidth, chartHeight);

将图像添加到 doc 对象,该imageData源自从 createCanvas 函数上面退回的canvas元素。

doc.save('example.pdf');

之后保存pdf。

在这种情况下,前端高图pdf生成是成功的,但图表分辨率非常低。 是否有可能提高渲染pdf图表的分辨率。

0 个答案:

没有答案
相关问题