基本上我想知道，在PDF上呈现Highchart的图表的最佳方法是什么？在我的情况下，我使用Highcharts与jsPDF来渲染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中是否有提高图表分辨率的可能性？

javascript highcharts pdf-generation jspdf