SVG patterns do not render when using minified version of pdfmake

[jpsilva]

Using patterns in SVG works as expected when importing the unminified version of pdfmake (pdfmake/build/pdfmake.js). But they render as solid black when either importing pdfmake.min.js or minimizing the original with Angular. I haven't noticed any other discrepancies between

Result with unminified version:

Result with minified version:

Code used to generate both results:

const pdfDoc = {
  content: [
    {
      svg: `
        <svg id="svg" viewBox="0 0 600 600">
          <defs>
            <pattern id="stripes" width="30" height="30" patternUnits="userSpaceOnUse">
              <path d="M0,0 15,0 0,15 z" fill="#00cc66" />
              <path d="M0,30 30,0 30,15 15,30 z" fill="#00cc66" />
            </pattern>
          </defs>
          <rect x="0" y="0" width="400" height="400" fill="#0044ff" />
          <rect x="200" y="200" width="400" height="400" fill="url(#stripes)" />
        </svg>
      `,
      width: 200
    }
  ]
};
const pdf = pdfMake.createPdf(pdfDoc);

pdf.open();

[matroskin]

@jpsilva managed to solve the problem?

[hielfx]

I'm also facing this issue with v0.1.68

[ThePongBRIKL]

Hi, i also got this issue when working on client side. any update soon ?

[QuentinJanuel]

Hello, I have this issue as well.
Anyone knows how can I at least force the unminified version on ReactJS production mode?
I hope the bug will be fixed in a near future : )

[ThePongBRIKL]

Hi guy, good news, i just solve this issue !!.
So the issue it come from svg-to-pdfkit dependencies not from pdfmake.

The main issue is constructor of "PDFPattern()" turn it self to "Object" after build.
Then it make this condition away false "if (color[0].constructor.name === 'PDFPattern')"
About line 163 and 171
So that why it not assign your pattern.

How to fix it up to you for me i add more parameter to check it is pattern fill or not.
See my attach below.

If you dont know where then follow this suggestion

• Copy my source.js
• Then paste it to node_modules/svg-to-pdfkit/source.js
• Then run build
• That's it !!

my edit source.js
https://filebin.net/f6ja3bo4pmqqpglz/source.js?t=cnlux7mq

Screenshot - also work well with image pattern.
https://filebin.net/4838bdcuiee8eon1/Screenshot_2020-12-09_143730.jpg?t=lcnl1036

Sorry for my bad English.
Thank you, enjoy hacking everyone.

[liborm85]

Fixed by commit 27d4b1c (in 0.1 branch) and 8ce24e0 (in master)

[yagoar]

Hi, we're still getting this issue on version 0.1.70
After building the app for production with create-react-app, the SVG pattern is shown as a solid black box.

Development build result:

Production build result:

[rafaeelneto]

im getting the same issue with version 0.2.4

[liborm85]

Tested with 0.2.4 and works correctly.

[tahmidrahman-dsi]

@liborm85 I am getting this error with version 0.2.5. Is there any fix or workaround?

[rafaeelneto]

after install the pdfmake you can change the pdfmake.js build file and change around the line 23032 that has

function docFillColor(color) {
    if (color[0].constructor.name === 'PDFPattern') {
      doc.fillOpacity(color[1]);
      docUsePattern(color[0], false);
    } else {
      doc.fillColor(color[0], color[1]);
    }
  }
function docStrokeColor(color) {
    if (color[0].constructor.name === 'PDFPattern') {
      doc.strokeOpacity(color[1]);
      docUsePattern(color[0], true);
    } else {
      doc.strokeColor(color[0], color[1]);
    }
  }

and add another condition to both if blocks

function docFillColor(color) {
    if (color[0].constructor.name === 'PDFPattern' || color[0].dx) {
      doc.fillOpacity(color[1]);
      docUsePattern(color[0], false);
    } else {
      doc.fillColor(color[0], color[1]);
    }
  }

  function docStrokeColor(color) {
    if (color[0].constructor.name === 'PDFPattern' || color[0].dx) {
      doc.strokeOpacity(color[1]);
      docUsePattern(color[0], true);
    } else {
      doc.strokeColor(color[0], color[1]);
    }
  }

if you're using something like github actions you can copy that modified pdfmake.js file into your project folder and run the following command after run npm install on cloud
npm ci && cp <your-pdfmake-folder>/pdfmakeCustom.js node_modules/pdfmake/build/pdfmake.js

[liborm85]

Re-tested with 0.2.5 and works correctly.

[mickey58github]

I get exactly the same problem when creating PDFs that contain pattern fills on Heroku Cloud with PDFsave. This is a big issue for our app. I'm using PDFSave v0.2.5. Is the above fix contained in v0.2.5 or not?

I tried the suggested workaround, overwriting the minified js file pdfmake.min.js with a custom version, but unfortunately that did NOT solve the issue. That leaves some doubts whether the suggested workaround really fixes the issue in all cases.

In my case, the issue shows with rectangles (rect tag) that use fill patterns through style = "fill: url(#my-pattern-id)". Those render in black color using the production build.

[MoosArga]

I get the same issue with 0.2.7. The fix on svg-to-pdfkit suggested by ThePongBRIKL solves the issue.
Any other option to avoid that kind of solutions ? I'm not a big fan to have to change my dependencies sources to get things work.

[LeGoffMael]

I also encountered this issue today while using the latest version 0.2.9.
I am using Vite in my project and the issue seems the be coming from vite's build minification.

I fixed it by adding those lines to the vite.config.ts (which basically reproduce 8ce24e0) :

build: {
    minify: 'terser',
    terserOptions: {
      keep_classnames: true,
      keep_fnames: true
    }
  },

another solution is simply to disable the minification

build: { minify: false },

[kfmadhusudhanj]

As @rafaeelneto mentioned in his comment we can do same code changes

function docFillColor(color) {
    if (color[0].constructor.name === 'PDFPattern' || color[0].dx) {
      doc.fillOpacity(color[1]);
      docUsePattern(color[0], false);
    } else {
      doc.fillColor(color[0], color[1]);
    }
  }

  function docStrokeColor(color) {
    if (color[0].constructor.name === 'PDFPattern' || color[0].dx) {
      doc.strokeOpacity(color[1]);
      docUsePattern(color[0], true);
    } else {
      doc.strokeColor(color[0], color[1]);
    }
  }

To execute this we can use npm hooks in package.json

 "scripts": {
    "postinstall": "cp <your-pdfmake-folder>/pdfmakeCustom.js node_modules/pdfmake/build/pdfmake.js 
 }