Question

我在点击时更改图表大小，以便更好地全面查看pdf的m数据。但问题是，当我点击调整画布元素的大小时，它会使它变得模糊不清。我正在点击它$('canvas').css("width","811");然后改变了大小，但使画布中的图形变得模糊。我已阅读了很多帖子，但没有找到特定的解决方案。有什么帮助吗？

这是我的jsfiddle

Answer 1

使用chart.js和html2pdf.js

选择DPI的Canvas到PDF

要更改PDF中画布的输出分辨率，需要设置DIP

从内存中A4横向约11 +英寸，你想要适合2000像素，所以让我们有一个1 +英寸的边距，使得图形的宽度为10“。我们可以使用CSS单位大小点（每英寸72点）所以画布尺寸应为72pt * 10“= 720pt。将高度缩放相同的数量。

现在让DPI将canvas.width除以2000/10 = 200的大小。

但我假设你想要更高。所以让我们更准确地做到这一点。

const A4 = {  // looked this up with google
    width : 11.69,
    height : 8.27,
}
// using pts and inches (I dont like using CSS inches)
const points = 72; // points per inch
const graphWidth = 10; // in inches on the page.
const graphDPI = 300; // desired DPI
const aspect = 492/2000; // aspect of image

function generate_pdf(){
    var canvas = document.getElementById('blanks_graph');
    canvas.width = graphWidth * graphDPI;
    canvas.height = Math.floor(canvas.width * aspect);
    canvas.style.width = (graphWidth * points) + "pt";
    canvas.style.height = Math.floor(graphWidth * points * aspect)+"pt";
    // add left margin to center graph.
    // you should remove the button and maybe put a margin on the top of
    // the canvas
    canvas.style.marginLeft = Math.floor(((A4.width - graphWidth) / 2) * points) + "pt"
    // changing the size needs to redraw the canvas
    redrawGraph();
    // the graph is drawn via a timeout event so will not be ready untill
    // after this function is done. Also there is the animation to avoid
    // So easy way is to just create the PDF with a timeout
    setTimeout(function(){
        var element = document.getElementById('main_data_div');
        html2pdf(element, {
            margin:       0,
            filename:     'myfile.pdf',
            image:        { type: 'jpeg', quality: 0.98 },
            html2canvas:  { dpi: graphDPI, letterRendering: true },
            jsPDF:        { unit: 'in', format: 'a4', orientation: 'l' }
         });
        },
        3000 // 3 seconds to redraw and animate.
    );
}

function redrawGraph(){ // redraws the graph
                        // just wrap this function around the graph draw code

改变画布的大小使其模糊

1 个答案:

使用chart.js和html2pdf.js