JsPDF

Question

我有一个程序编码用于获取 3 svg（y1 轴，底部有 x1 轴的图形，y2 轴）并用它创建一个 pdf。
在创建 pdf 的代码中，在我创建 svg

之前

var source = d3.select("body")
    .append("svg")
    .attr("height", this.node.clientHeight + this.node.clientHeight/10)
    .attr("width", this.node.clientWidth + 65*2 + this.node.clientWidth/20)
    .attr('version', 1.1)
    .attr('xmlns', 'http://www.w3.org/2000/svg')
    .html(d3.select(".svgaxisy").node().innerHTML+"<g transform='translate(65,10)'>"+d3.select(this.node).node().innerHTML+"</g>"+
        "<g transform='translate("+(this.node.clientWidth + ((this.node.clientWidth/this.nested_data.length)/20) + 65)+",0)'>"+d3.select(".svgaxisy2").node().innerHTML+"</g>");

设置 jsPDF 的宽度和高度值后，我将源代码放入 SaveSvgAsPng npm 模块中，给我一个带有图像的 link。我将该图像放入 JsPDF 中以将其转换为 pdf。
（我已经用 saveSvgAsPng 测试过下载 png，这按预期工作）

saveSvgAsPng.svgAsPngUri(source.node(), {}, function(uri) {
    const pdf = new jsPDF("landscape", 'px', [more_height, more_width]);
    pdf.addImage(uri, 'PNG', 0, 0);
    pdf.save("graph.pdf");
    d3.select(source.node()).remove();
}.bind(this));

这样行得通，在我的大屏幕上它给我一个完整的图表，但在一个小屏幕的笔记本电脑上它只显示一半的图表。

Answer 1

因此，对于解决方案，我决定将 npm 模块 save-svg-as-png 与该代码一起使用：

var source = d3.select("body")
    .append("svg")
    .attr("height", this.node.clientHeight + this.node.clientHeight/10)
    .attr("width", this.node.clientWidth + 65*2 + this.node.clientWidth/20)
    .attr('version', 1.1)
    .attr('xmlns', 'http://www.w3.org/2000/svg')
    .html(d3.select(".svgaxisy").node().innerHTML+"<g transform='translate(65,10)'>"+d3.select(this.node).node().innerHTML+"</g>"+
        "<g transform='translate("+(this.node.clientWidth + ((this.node.clientWidth/this.nested_data.length)/20) + 65)+",0)'>"+d3.select(".svgaxisy2").node().innerHTML+"</g>");

saveSvgAsPng.saveSvgAsPng(source.node(), "graph.png");

JsPDF - 在小屏幕上剪切图像

JsPDF - Image cut on little screen

d3.js

reactjs