JsPDF - изображение вырезано на маленьком экране - PullRequest
Новая
       11

JsPDF - изображение вырезано на маленьком экране

0 голосов
/ 06 февраля 2019

У меня есть программа, кодирующая дубль 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, чтобы дать мне ссылку с изображением.Я поместил это изображение в 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));

Так что это работает на моем большомНа экране отображается полный график, но на ноутбуке с небольшим экраном отображается только половина графика.

1 Ответ

0 голосов
/ 21 февраля 2019

Итак, для решения я решил использовать модуль 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");
...