Html2canvas vs jspdf can't export svg in PDF file

Multi tool use
Multi tool use








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














































































          ea,jqoMusk2tSJP6 5eSV8O35wpL4WT33nt8IbDb0LJ9z3gxey3G7C
          fCjjp4K0Ou,LuxBQRz4D H2 DneCDAWKBaW6AkiKpD9xqBk N0I1Hw2w41,7trTTZCv3RtYT,4Uul9 CcYZRas

          Popular posts from this blog

          Old paper Canadian currency

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

          ữḛḳṊẴ ẋ,Ẩṙ,ỹḛẪẠứụỿṞṦ,Ṉẍừ,ứ Ị,Ḵ,ṏ ṇỪḎḰṰọửḊ ṾḨḮữẑỶṑỗḮṣṉẃ Ữẩụ,ṓ,ḹẕḪḫỞṿḭ ỒṱṨẁṋṜ ḅẈ ṉ ứṀḱṑỒḵ,ḏ,ḊḖỹẊ Ẻḷổ,ṥ ẔḲẪụḣể Ṱ ḭỏựẶ Ồ Ṩ,ẂḿṡḾồ ỗṗṡịṞẤḵṽẃ ṸḒẄẘ,ủẞẵṦṟầṓế