JSFiddle - React, Tailwind, and code Playground

by ucdl

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/pdfkit.standalone.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/source.js"></script>

JavaScript

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);
    },
    // readable streaaam stub iplementation
    on: (event, action) => {},
    once: (...args) => {},
    emit: (...args) => {},
  });

  window.SVGtoPDF(doc, svg, 0, 0);

  doc.end();
};

const flowerSvg = `
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 695.8 707.7" style="enable-background:new 0 0 695.8 707.7;" xml:space="preserve">
<style type="text/css">
	.A{fill:#009444;}
	.B{fill:#A3CF62;}
	.C{fill:#F58220;}
	.D{fill:#FFD400;}
	.E{fill:#FFFFFF;}
	.F{fill:#6D6E71;}
</style>
<g id="ファイアフラワー">
	<path class="A" d="M298.2,479.9c0,17.9,0.1,202,0.1,202c0,19,26.1,25.7,50.5,25.7c24.4,0,50.5-6.7,50.5-25.7v-202
		C372,483.7,322.2,483.7,298.2,479.9"/>
	<path class="A" d="M691,513.4c-0.7-0.5-73.1-56-160.3-34.2c-45.7,11.5-77.2,50-92.9,78.6c-18.7,34.1-18.5,74.3-16.7,92.3
		c2,19.5,0.9,22.8,19.2,24.9c44.2,5.1,129.5,14.6,195.7-37c35.9-27.9,55.4-65.1,59.7-113.7C696.1,520,694.4,516,691,513.4"/>
	<path class="B" d="M603.2,553.2c-58.1,16.8-120.8,62.9-152.9,88.9c-1.9,1.5-4.9,3.4-7.7,3.4c-2.2,0-3.9-1-4.9-2.7
		c-1.9-3.4-0.4-8.9,4.8-17.2c28.8-45.7,95.7-83.9,152.5-86.7c1.3-0.1,2.6-0.2,3.8-0.2c13,0,15,3.3,15.4,5.8
		C614.8,549.2,609.1,551.5,603.2,553.2"/>
	<path class="A" d="M257.9,557.7c-15.7-28.6-47.1-67-92.9-78.6C77.8,457.3,5.5,512.8,4.7,513.3c-3.3,2.7-5.1,6.8-4.7,10.9
		c4.2,48.5,23.7,85.7,59.7,113.7c66.3,51.6,151.4,42.2,195.7,37c18.2-2.1,17.2-5.4,19.1-24.9C276.4,632,276.7,591.8,257.9,557.7"/>
	<path class="B"...