Экспорт PDF из диаграммы SVG d3 с использованием JavaScript - PullRequest
Новая
       22

Экспорт PDF из диаграммы SVG d3 с использованием JavaScript

0 голосов
/ 25 июня 2019

Я пытаюсь экспортировать диаграмму SVG d3 в файл pdf, используя jsPDF и JavaScript.

Я использую jsPDF для экспорта PDF-файлов.Я могу экспортировать файл, но в нем только меньше содержимого. 

$("#exportPDF").click(() => {
      let svg = new XMLSerializer().serializeToString(document.getElementById("Employement_Source"));
      let canvas = document.createElement("canvas");
      let ctx = canvas.getContext("2d");
      let doc = new jsPDF({orientation: 'l', unit: 'px'});
      let img = document.createElement("img");
      img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svg));
      img.onload = () => {
        ctx.drawImage(img, 0, 0);
        console.log(canvas.toDataURL("image/png"));
        doc.setFontSize(11);
        doc.text(5, 10, 'D3 Chart');
        doc.addImage(canvas.toDataURL("image/png"), 'PNG', 10, 10, 200, 100);
        doc.save('download.pdf');
      };
    });

Ожидается полная диаграмма в экспортированном файле PDF.

1 Ответ

0 голосов
/ 27 июня 2019

Ниже приведено решение проблемы, с которой я столкнулся в последнее время. У меня есть размеры холста, чтобы я мог получить полную диаграмму. 

$("#exportPDF").click(() => {
      let svg = new XMLSerializer().serializeToString(document.getElementById("Employement_Source"));
      let canvas = document.createElement("canvas");
      let svgSize = $(svg)[0];
      // let svgSize = $(svg)[0].getBoundingClientRect();
      canvas.width = svgSize.width.baseVal.value;
      canvas.height = svgSize.height.baseVal.value;

      let ctx = canvas.getContext("2d");
      let doc = new jsPDF({
        orientation: 'l',
        unit: 'px'
      });
      let img = document.createElement("img");
      img.onload = () => {
        ctx.drawImage(img, 0, 0);
        // console.log(canvas.toDataURL("image/png"));
        doc.setFontSize(11);
        doc.text(5, 10, 'D3 Chart');
        doc.addImage(canvas.toDataURL("image/png"), 'PNG', 10, 10);
        doc.save('download.pdf');
      };
      img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svg));
    });
...