Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

handle svg as string or DOM element #2291

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

mbcgit
Copy link

@mbcgit mbcgit commented Jul 14, 2021

Hello,

I would like to add an SVG Element from the containing HTML page to the generated pdf. In order to use also the existing styling, it is necessary to transfer the SVG Element to svg-to-pdf and not only SVG as text.

When the changes of this commit, it is possible to do so by calling:

const docDefinition = ...
const svgElement: Node = document.getElementById("mySVG");
const svgdoc = {
svg: svgElement,
width: 400,
options: {
useCSS: true
}
};
docDefinition.content.push(svgdoc);

pdfMake.createPdf(docDefinition)

I think this is useful for other users, too, and would therefore ask you to integrate this pull request.

Cheers
Markus

@bertvh
Copy link

bertvh commented Jan 5, 2022

This is exactly what I need. I was just about to make similar changes and do a PR myself.

Any way of getting this merged? Haven't tested of checked out the PR in great detail but willing to do so.

@adamwong246
Copy link

I don't believe any changes are needed. Call outerHTML() upon your svg element to create a string, then use that string to build your layout.

@bertvh
Copy link

bertvh commented Jul 28, 2022

I'm a bit "out" of this but if I recall correctly, that doesn't work well since outerHTML() doesn't include the css from parent nodes or imported stylesheets in the page. So, this only works if all of the svg styling is done inside the svg.

<html>
  <head>
    <style ... />  <!-- not applied in the PDF -->
    <link rel="stylesheet" ... /> <!-- not applied in the PDF -->
  </head>
  <body style="..."> <!-- not applied in the PDF -->
  <svg> <!-- outerHTML() here -->
    <g>
      <path d="M28.44......." style="fill: black;"/> <!-- Only this style is applied in the PDF -->
    </g>
  </svg>
</html>

@adamwong246
Copy link

That is true but such a feature would not really be the purview of this library. You'll need to capture that css and combine it with the svg, and then pass that as content to pdfmake. I would recommend something like this: https://www.npmjs.com/package/html-inline-external.

@bertvh
Copy link

bertvh commented Jul 31, 2022

That seems like a good solution to me. Thanks. Maybe worth mentioning in the docs?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants