admin 管理员组

文章数量: 1086019

I'm currently using d3.js version 5 and was wondering if there is an actual way for me to export my charts to PDF? For example in the screenshot provided below, there is a button for me to use or an option for me to export that specific chart to PDF

I'm currently using d3.js version 5 and was wondering if there is an actual way for me to export my charts to PDF? For example in the screenshot provided below, there is a button for me to use or an option for me to export that specific chart to PDF

  • javascript
  • d3.js
  • pdf-generation
Share Improve this question asked May 14, 2020 at 14:47 Elijah LeisElijah Leis 4152 gold badges11 silver badges24 bronze badges 1
  • Do you need the conversion to happen on client side (jsPDF) or running it server side (wkhtmltopdf) will be alright? – timur Commented May 18, 2020 at 3:39
Add a ment  | 

1 Answer 1

Reset to default 7 +50

You can use PDFKIT library to achieve this, this snippet is inspired by the example they provided in the live demo, I just extended it by adding the D3.js example along javascript to retrieve the HTML text.

Update: I added custom implementation to allow custom file name for the downloaded PDF, basically I create <a> tag, append it to body, then assign download attribute to it, and the href attribute contains the blob object URL we created.

NOTE: this will not work in the snippet since its a sandbox, it should work fine in your local machine and production.

const svgToPdfExample = (svg) => {
  const doc = new window.PDFDocument();
  const chunks = [];
  const stream = doc.pipe({
    // writable stream implementation
    write: (chunk) => chunks.push(chunk),
    end: () => {
      const pdfBlob = new Blob(chunks, {
        type: "application/octet-stream",
      });
      var blobUrl = URL.createObjectURL(pdfBlob);
      //window.open(`${blobUrl}?customfilename.pdf`);
      
      /* custom file name download */
      const a = document.createElement("a");
      document.body.appendChild(a);
      a.style = "display: none";
      a.href = blobUrl;
      a.download = "test.pdf"; // <----             
            
            

                本文标签：
                                                javascriptD3js version 5 chart to PDFStack Overflow
                                            


            

                

                    

                        版权声明：本文标题：javascript - D3.js version 5 chart to PDF - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，
                        转载请联系作者并注明出处：http://roclinux.cn/p/1744084607a2530886.html，
                        本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。