Html2canvas vs jspdf can't export svg in PDF file









up vote
0
down vote

favorite












I use html2canvas vs jsPDF in my Reactjs project and I had a required that's export a DOM node to PDF file. When I exported, HTML and CSS was keeped just SVG can't. I dont know why. Have another package on client can help me? Thank for your attetion.
Here is my code to export



const filename = 'TyVan.pdf';
html2canvas(document.querySelector('#buivanty'),scale: quality).then(canvas =>
let pdf = new jsPDF('l', 'mm', 'a4', true)

pdf.addImage(canvas.toDataURL('image/png', 1.0), 'png', 10, 10, 180, 150);
pdf.save(filename);
)









share|improve this question

























    up vote
    0
    down vote

    favorite












    I use html2canvas vs jsPDF in my Reactjs project and I had a required that's export a DOM node to PDF file. When I exported, HTML and CSS was keeped just SVG can't. I dont know why. Have another package on client can help me? Thank for your attetion.
    Here is my code to export



    const filename = 'TyVan.pdf';
    html2canvas(document.querySelector('#buivanty'),scale: quality).then(canvas =>
    let pdf = new jsPDF('l', 'mm', 'a4', true)

    pdf.addImage(canvas.toDataURL('image/png', 1.0), 'png', 10, 10, 180, 150);
    pdf.save(filename);
    )









    share|improve this question























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I use html2canvas vs jsPDF in my Reactjs project and I had a required that's export a DOM node to PDF file. When I exported, HTML and CSS was keeped just SVG can't. I dont know why. Have another package on client can help me? Thank for your attetion.
      Here is my code to export



      const filename = 'TyVan.pdf';
      html2canvas(document.querySelector('#buivanty'),scale: quality).then(canvas =>
      let pdf = new jsPDF('l', 'mm', 'a4', true)

      pdf.addImage(canvas.toDataURL('image/png', 1.0), 'png', 10, 10, 180, 150);
      pdf.save(filename);
      )









      share|improve this question













      I use html2canvas vs jsPDF in my Reactjs project and I had a required that's export a DOM node to PDF file. When I exported, HTML and CSS was keeped just SVG can't. I dont know why. Have another package on client can help me? Thank for your attetion.
      Here is my code to export



      const filename = 'TyVan.pdf';
      html2canvas(document.querySelector('#buivanty'),scale: quality).then(canvas =>
      let pdf = new jsPDF('l', 'mm', 'a4', true)

      pdf.addImage(canvas.toDataURL('image/png', 1.0), 'png', 10, 10, 180, 150);
      pdf.save(filename);
      )






      reactjs jspdf html2canvas






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 8 at 14:16









      Tý Văn

      61




      61






















          1 Answer
          1






          active

          oldest

          votes

















          up vote
          0
          down vote













          I was able to resolve it by doing post processing using onClone option



          const options = 
          scale: 1,
          foreignObjectRendering: true,
          onclone: (element) =>
          const svgElements: any = element.body.getElementsByTagName('svg');
          Array.from(svgElements).forEach((svgElement) =>
          const bBox: any = svgElement.getBBox();
          svgElement.setAttribute('width', bBox.width);
          svgElement.setAttribute('height', bBox.height);
          );
          ,
          ;

          html2canvas(<HTMLScriptElement>document.querySelector('.main-container'), options).then(canvas =>
          this.clipImage = canvas.toDataURL('image/png');
          );





          share|improve this answer




















          • Can I custom width and height of svg? :))). This code was great. just had a problems about svg size :)) Thank you very much
            – Tý Văn
            Nov 9 at 2:31










          Your Answer






          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "1"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );













           

          draft saved


          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53209587%2fhtml2canvas-vs-jspdf-cant-export-svg-in-pdf-file%23new-answer', 'question_page');

          );

          Post as a guest






























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          0
          down vote













          I was able to resolve it by doing post processing using onClone option



          const options = 
          scale: 1,
          foreignObjectRendering: true,
          onclone: (element) =>
          const svgElements: any = element.body.getElementsByTagName('svg');
          Array.from(svgElements).forEach((svgElement) =>
          const bBox: any = svgElement.getBBox();
          svgElement.setAttribute('width', bBox.width);
          svgElement.setAttribute('height', bBox.height);
          );
          ,
          ;

          html2canvas(<HTMLScriptElement>document.querySelector('.main-container'), options).then(canvas =>
          this.clipImage = canvas.toDataURL('image/png');
          );





          share|improve this answer




















          • Can I custom width and height of svg? :))). This code was great. just had a problems about svg size :)) Thank you very much
            – Tý Văn
            Nov 9 at 2:31














          up vote
          0
          down vote













          I was able to resolve it by doing post processing using onClone option



          const options = 
          scale: 1,
          foreignObjectRendering: true,
          onclone: (element) =>
          const svgElements: any = element.body.getElementsByTagName('svg');
          Array.from(svgElements).forEach((svgElement) =>
          const bBox: any = svgElement.getBBox();
          svgElement.setAttribute('width', bBox.width);
          svgElement.setAttribute('height', bBox.height);
          );
          ,
          ;

          html2canvas(<HTMLScriptElement>document.querySelector('.main-container'), options).then(canvas =>
          this.clipImage = canvas.toDataURL('image/png');
          );





          share|improve this answer




















          • Can I custom width and height of svg? :))). This code was great. just had a problems about svg size :)) Thank you very much
            – Tý Văn
            Nov 9 at 2:31












          up vote
          0
          down vote










          up vote
          0
          down vote









          I was able to resolve it by doing post processing using onClone option



          const options = 
          scale: 1,
          foreignObjectRendering: true,
          onclone: (element) =>
          const svgElements: any = element.body.getElementsByTagName('svg');
          Array.from(svgElements).forEach((svgElement) =>
          const bBox: any = svgElement.getBBox();
          svgElement.setAttribute('width', bBox.width);
          svgElement.setAttribute('height', bBox.height);
          );
          ,
          ;

          html2canvas(<HTMLScriptElement>document.querySelector('.main-container'), options).then(canvas =>
          this.clipImage = canvas.toDataURL('image/png');
          );





          share|improve this answer












          I was able to resolve it by doing post processing using onClone option



          const options = 
          scale: 1,
          foreignObjectRendering: true,
          onclone: (element) =>
          const svgElements: any = element.body.getElementsByTagName('svg');
          Array.from(svgElements).forEach((svgElement) =>
          const bBox: any = svgElement.getBBox();
          svgElement.setAttribute('width', bBox.width);
          svgElement.setAttribute('height', bBox.height);
          );
          ,
          ;

          html2canvas(<HTMLScriptElement>document.querySelector('.main-container'), options).then(canvas =>
          this.clipImage = canvas.toDataURL('image/png');
          );






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 8 at 18:15









          pujoey

          1058




          1058











          • Can I custom width and height of svg? :))). This code was great. just had a problems about svg size :)) Thank you very much
            – Tý Văn
            Nov 9 at 2:31
















          • Can I custom width and height of svg? :))). This code was great. just had a problems about svg size :)) Thank you very much
            – Tý Văn
            Nov 9 at 2:31















          Can I custom width and height of svg? :))). This code was great. just had a problems about svg size :)) Thank you very much
          – Tý Văn
          Nov 9 at 2:31




          Can I custom width and height of svg? :))). This code was great. just had a problems about svg size :)) Thank you very much
          – Tý Văn
          Nov 9 at 2:31

















           

          draft saved


          draft discarded















































           


          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53209587%2fhtml2canvas-vs-jspdf-cant-export-svg-in-pdf-file%23new-answer', 'question_page');

          );

          Post as a guest














































































          Popular posts from this blog

          𛂒𛀶,𛀽𛀑𛂀𛃧𛂓𛀙𛃆𛃑𛃷𛂟𛁡𛀢𛀟𛁤𛂽𛁕𛁪𛂟𛂯,𛁞𛂧𛀴𛁄𛁠𛁼𛂿𛀤 𛂘,𛁺𛂾𛃭𛃭𛃵𛀺,𛂣𛃍𛂖𛃶 𛀸𛃀𛂖𛁶𛁏𛁚 𛂢𛂞 𛁰𛂆𛀔,𛁸𛀽𛁓𛃋𛂇𛃧𛀧𛃣𛂐𛃇,𛂂𛃻𛃲𛁬𛃞𛀧𛃃𛀅 𛂭𛁠𛁡𛃇𛀷𛃓𛁥,𛁙𛁘𛁞𛃸𛁸𛃣𛁜,𛂛,𛃿,𛁯𛂘𛂌𛃛𛁱𛃌𛂈𛂇 𛁊𛃲,𛀕𛃴𛀜 𛀶𛂆𛀶𛃟𛂉𛀣,𛂐𛁞𛁾 𛁷𛂑𛁳𛂯𛀬𛃅,𛃶𛁼

          Edmonton

          Crossroads (UK TV series)