D3.js 版本 5 图表到 PDF

Question

我目前正在使用 d3.js 版本 5，想知道是否有一种实际的方法可以将我的图表导出到 PDF？ 例如，在下面提供的屏幕截图中，有一个按钮供我使用或一个选项供我将该特定图表导出到 PDF

Answer 1

您可以使用PDFKIT库来实现这一点，这个片段的灵感来自他们在现场演示中提供的示例，我只是通过沿 javascript 添加D3.js示例来扩展它以检索 Z4C4AD5FCA2E7A3F74DBB1CED00381AA4 文本。

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.

注意：这在代码片段中不起作用，因为它是一个沙箱，它应该在您的本地机器和生产环境中正常工作。

---

 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"; // <---- file name a.click(); window.URL.revokeObjectURL(url); }, // readable streaaam stub iplementation on: (event, action) => {}, once: (...args) => {}, emit: (...args) => {}, }); window.SVGtoPDF(doc, svg, 0, 0); doc.end(); }; document.getElementById("download").addEventListener("click", function () { const svgElement = document.getElementById("svg"); svgToPdfExample(svgElement.innerHTML); }); var margin = { top: 20, right: 20, bottom: 70, left: 40 }, width = 900 - margin.left - margin.right, height = 300 - margin.top - margin.bottom; // Parse the date / time var parseDate = d3.time.format("%Y-%m").parse; var x = d3.scale.ordinal().rangeRoundBands([0, width], 0.05); var y = d3.scale.linear().range([height, 0]); var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.time.format("%Y-%m")); var yAxis = d3.svg.axis().scale(y).orient("left").ticks(10); var svg = d3.select("body").append("svg").attr("id", "svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); d3.csv( "https://gist.githubusercontent.com/d3noob/8952219/raw/5017886e4fe22af2a7e06e20cf381bcf09cdc6db/bar-data.csv", function (error, data) { data.forEach(function (d) { d.date = parseDate(d.date); d.value = +d.value; }); x.domain( data.map(function (d) { return d.date; }) ); y.domain([ 0, d3.max(data, function (d) { return d.value; }), ]); svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis).selectAll("text").style("text-anchor", "end").attr("dx", "-.8em").attr("dy", "-.55em").attr("transform", "rotate(-90)"); svg.append("g").attr("class", "y axis").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", 6).attr("dy", ".71em").style("text-anchor", "end").text("Value ($)"); svg.selectAll("bar").data(data).enter().append("rect").style("fill", "steelblue").attr("x", function (d) { return x(d.date); }).attr("width", x.rangeBand()).attr("y", function (d) { return y(d.value); }).attr("height", function (d) { return height - y(d.value); }); } );

 .axis { font: 10px sans-serif; }.axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; }

 <:DOCTYPE html> <meta charset="utf-8"> <head> </head> <body> <script src="https.//cdn.jsdelivr.net/npm/pdfkit@0.10.0/js/pdfkit.standalone:js"></script> <script src="https.//cdn.jsdelivr.net/npm/svg-to-pdfkit@0.1.8/source:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> <button id="download">Donwload SVG as PDF</button> </body>