search

yWorks / svg2pdf.js

A javascript-only SVG to PDF conversion utility that runs in the browser. Brought to you by yWorks - the diagramming experts
MIT License
649 stars 98 forks source link

Using an added unicode font results in broken PDF #190

Closed popobol closed 2 years ago

popobol commented 2 years ago

Description

Using an added unicode font in SVG results in broken PDF. There are no warnings or errors logged in the console.

On Windows, Sumatra displays a blank page, Adobe Reader says "There as an error processing a page. There as a problem reading this document (135)". On macOS Big Sur 11.5.2, "Preview" displays a blank page.

However, the PDF renders correctly with anything Poppler-based on Linux or with PDF readers built into Firefox or Chrome browsers.

Various PDF tools report problems with the file. E.g. pdfunite : "Syntax Error: Dictionary key must be a name object" mutool : "error: invalid key in dict" gs -sDEVICE=pdfwrite : "Error: obj definition followed by multiple tokens" etc.

Versions used: jspdf.umd.js : 2.3.1 svg2pdf.umd.js : 2.1.0

To reproduce

HTML

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>SVG to PDF test</title>
</head>

<body>

    <div>
        <svg id="blanket" width="85.6mm" height="53.98mm" version="1.1" viewBox="0 0 85.6 53.98"
            xmlns="http://www.w3.org/2000/svg">
            <g transform="translate(0,-243.02)">
                <text x="43.495049" y="273.79272" fill="#000000" font-family="sans-serif" font-size="10.583px"
                    letter-spacing="0px" stroke-width=".26458" text-align="center" text-anchor="middle"
                    word-spacing="0px" style="line-height:1.25" xml:space="preserve">
                    <tspan x="43.495049" y="273.79272" font-family="'Liberation Sans'" font-size="10.583px"
                        font-weight="bold" stroke-width=".26458" text-align="center" text-anchor="middle"
                        style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal">
                        [inserthere]</tspan>
                </text>
            </g>
        </svg>
    </div>

    <script src="../../../current/lib.js/nih/jspdf/jspdf.umd.js"></script>
    <script src="../../../current/lib.js/nih/svg2pdf/svg2pdf.umd.js"></script>
    <script src="../../../current/lib.js/nih/fonts/LiberationSans-Bold-bold.js"></script>
    <script src="asypdf.js" defer></script>
</body>

asypdf.js

const { jsPDF } = window.jspdf;

var svgNodeTemplate = document.getElementById("blanket");

var pageWidth = 85.6,
    pageHeight = 53.98;
var pdf = new jsPDF('l', 'mm', [pageWidth, pageHeight], true);

async function addPages() {
    await pdf.svg(svgNodeTemplate, { x: 0, y: 0, width: pageWidth, height: pageHeight});
    pdf.save("result.pdf");
}

addPages();

The UMD "LiberationSans-Bold-bold.js" (LiberationSans-Bold-bold.js.zip attached) was generated with jsPDF fontconverter tool from a TTF coming with default Xubuntu installation. The behaviour is the same with Free Sans, or Noto Sans fonts.

The behaviour is the same with SVG units changed to px.

If an additional font is not loaded, or when using default fonts, the PDF renders just fine.

Using the same font file to generate a PDF using jsPDF, but without SVG/svg2pdf stage, works ok.

Platform

HackbrettXXX commented 2 years ago

Thanks for reporting this. I think it's a bug in jsPDF, though. When run this

pdf.setFont('Liberation Sans', 'bold')
pdf.text(30, 30, 'foo bar')
pdf.save('result.pdf')

it also creates an invalid PDF. Please move this issue to jsPDF. There have been similar issues with some fonts in the past. A workaround might be to use a different font.

popobol commented 2 years ago

Thanks for reporting this. I think it's a bug in jsPDF, though. When run this

pdf.setFont('Liberation Sans', 'bold')
pdf.text(30, 30, 'foo bar')
pdf.save('result.pdf')

it also creates an invalid PDF. Please move this issue to jsPDF. There have been similar issues with some fonts in the past. A workaround might be to use a different font.

Thanks! All apologies for raising it in a wrong channel. New issue opened with jsPDF: https://github.com/MrRio/jsPDF/issues/3245

Closing it here.