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
655 stars 101 forks source link

Chinese characters not rendered #19

Closed TorsteinHonsi closed 7 years ago

TorsteinHonsi commented 7 years ago

I'm not sure if this issue belongs in svg2pdf or jspdf. While non-English characters like Umlaüte work well, Chinese characters don't.

First reported to Highcharts: https://github.com/highcharts/highcharts/issues/6417#issuecomment-282946304

Screenshot

skjermbilde 2017-03-01 kl 10 19 41

Demo

<!DOCTYPE html>
<head>
  <script src="../node_modules/jspdf-yworks/dist/jspdf.min.js"></script>
  <script src="../dist/svg2pdf.min.js" charset="utf-8"></script>
</head>
<body>
<div style="float: left">
  <h4>SVG:</h4>
  <svg id="svgElement" width="320" height="320" xmlns="http://www.w3.org/2000/svg">
    <text x="20" y="30" style="color: black; font-family: sans-serif">Umlaüte</text>
    <text x="20" y="60" style="color: black; font-family: sans-serif">分享基督耶穌的愛給他們</text>
  </svg>
</div>
<!--
<br>
<button onclick="save();">Convert</button>
<br>
-->
<div style="float: left">
  <h4>PDF:</h4>
  <iframe id="pdf" style="width: 550px; height: 600px"></iframe>
</div>
<script>
  function svgToPdf(svgElement, margin) {
    var width = svgElement.width.baseVal.value + 2 * margin;
    var height = svgElement.height.baseVal.value + 2 * margin;
    var pdf = new jsPDF('l', 'pt', [width, height]);
    svg2pdf(svgElement, pdf, {removeInvalid: true});

    return pdf.output('datauristring');
  }

  function saveToFile(/**string*/ fileContentUrl, /**string*/ fileName, /**function(Object, yfiles.canvas.FileEventArgs)*/ handler) {
    var aElement = document.createElement("a");
    aElement.setAttribute("href", fileContentUrl);
    aElement.setAttribute("download", fileName);
    aElement.style.setProperty("display", "none", "");
    document.body.appendChild(aElement);
    aElement.click();
    document.body.removeChild(aElement);

    handler();
  }

  function save() {
    document.getElementById("pdf").src = svgToPdf(document.getElementById("svgElement"), 0);
  }

  save();
</script>
</body>
fskpf commented 7 years ago

Afaik this is a jspdf issue, see this thread https://github.com/MrRio/jsPDF/issues/12 from 2012 which is still open. There are also several mentions of chinese characters that don't render properly.

TorsteinHonsi commented 7 years ago

Ouch. Thanks!​