yworks / svg2pdf.js Goto Github PK
View Code? Open in Web Editor NEWA javascript-only SVG to PDF conversion utility that runs in the browser. Brought to you by yWorks - the diagramming experts
License: MIT License
A javascript-only SVG to PDF conversion utility that runs in the browser. Brought to you by yWorks - the diagramming experts
License: MIT License
The width and height properties don't seem work properly anymore. For example, take test2.html and change the code to
var width = 100;
var height = 300;
var pdf = new jsPDF('l', 'pt', [width, height]);
The resulting pdf is much wider than high. The same issue can be observed in http://live.yworks.com/demos/view/pdfexport/index.html or https://www.yworks.com/yed-live/ when changing the export rectangle to be smaller than high.
This used to work in the past as far as I can remember.
I used the following SVG as a test but the markers are not rendered in PDF.
<svg id="svg" width="400" height="400">
<defs>
<marker id="triangle-end" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="10" markerHeight="10" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#FF0000"></path>
</marker>
<marker id="circle-start" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="10" markerHeight="10" orient="auto">
<circle r="5" cx="5" cy="5" fill="#FF0000"></path>
</marker>
</defs>
<line x1="100" y1="100" x2="200" y2="200" marker-end="url(#triangle-end)" marker-start="url(#circle-start)" stroke="#000000"></line>
</svg>
CSS allows to specify multiple fonts in a font-family attribute:
font-family: 'My own font', fantasy;
See:
https://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#propdef-font-family
https://www.w3.org/TR/SVG/text.html#FontFamilyProperty
Hi,
I get the following error:
Cannot read property 'toFixed' of undefined TypeError: Cannot read property 'toFixed' of undefined
at it (jspdf.min.js?01f5:29)
at Rt.toString (jspdf.min.js?01f5:29)
at dt (jspdf.min.js?01f5:29)
at Zt (jspdf.min.js?01f5:29)
at Object.<anonymous> (jspdf.min.js?01f5:29)
at Object.Ut.t.foo [as output] (jspdf.min.js?01f5:29)
Thanks,
Samim
Live demo: https://jsfiddle.net/7r9r26vL/4/
After fixing #10, arcs display fine in Chrome, but Safari and Firefox simply leave them out. It can be seen with test no 21 in the repo:
I'm unable to install via NPM
fatal: ambiguous argument '1.1.350': unknown revision or path not in the working tree.
Actually the tag in GitHub is v1.1.350
Hi,
I get the following error in my browser console.
Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
at l (bundle.js:493)
at k (bundle.js:493)
at U (bundle.js:493)
at Q (bundle.js:493)
at Object.<anonymous> (bundle.js:58)
at __webpack_require__ (bundle.js:20)
at bundle.js:40
at bundle.js:43
I have update the my files at my repo, you can reproduce the error:
https://github.com/psamim/svg2pdf.js-test
(npm install
, ./node_modules/.bin/webpack ./entry.js bundle.js
, then open index.html
l)
Thanks,
Samim
During image conversion, we assign the image.src and immediately draw it to a canvas:
var imageUrl = node.getAttribute("xlink:href") || node.getAttribute("href");
var image = new Image();
image.src = imageUrl;
...
context.drawImage(image, 0, 0, width, height);
The assignment is asynchronous and we should wait for image.onload to fire before drawing it into the canvas.
Possible workaround:
Preload images before even starting the conversion. See attached file which outlines the approach (changes are marked by //*******************). Due to the change, the main function returns a Promise then.
svg2pdf_js.txt
Rather than preloading the images we should actually use image.onload where the image is converted. However, due to the asynchronous assignment, this would need additional changes in the other parts of the code.
Hi Guys,
i have the following svg, which has a yellow rounded corner object with a text in it, but in the pdf it converts it to a black box instead. can someone help me identify why is that happening?
svg:
<svg id="svgElement" width="600px" height="600px" GL="0 0 1315 301" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g transform="matrix(1, 0, 0, 1, 0, 0)" clip-path="url(#mainClip5855)"> <rect x="0" y="0" width="1315" height="301" fill="white" stroke="none" transform="matrix(1, 0, 0, 1, 0, 0)"/> <g transform="matrix(1, 0, 0, 1, 30, 1)"> <g transform="matrix(1, 0, 0, 1, 180, 72)"> <g transform="matrix(1, 0, 0, 1, 0, 0)"> <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#SHADOW5859)"> <filter id="SHADOW5859" x="-100%" y="-100%" width="300%" height="300%"> <feGaussianBlur in="SourceAlpha" result="blur" wL="2"/> <feFlood in="blur" result="flood" flood-color="rgba(0, 0, 0, 0.3)"/> <feComposite in="flood" in2="blur" operator="in" result="comp"/> <feOffset in="comp" result="offsetBlur" dx="0" dy="2"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> <path d="M 0,2 L 0,2.0000000000000004 A 2,2 90 0,1 1.9999999999999996,0 L 127,0 L 127,0 A 2,2 90 0,1 129,1.9999999999999996 L 129,79 L 129,79 A 2,2 90 0,1 127,81 L 2,81 L 2,81 A 2,2 90 0,1 0,79 L 0,2 z" fill="url(#GRAD5860)" stroke="none" transform="matrix(1, 0, 0, 1, 1.5, 1.5)"/> <path d="M 0,2 L 0,2.0000000000000004 A 2,2 90 0,1 1.9999999999999996,0 L 127,0 L 127,0 A 2,2 90 0,1 129,1.9999999999999996 L 129,79 L 129,79 A 2,2 90 0,1 127,81 L 2,81 L 2,81 A 2,2 90 0,1 0,79 L 0,2 z" fill="none" stroke="url(#GRAD5861)" stroke-width="3" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" transform="matrix(1, 0, 0, 1, 1.5, 1.5)"/> </g> <g transform="matrix(1, 0, 0, 1, 0, 0)"> <path d="M 0,2 L 0,2.0000000000000004 A 2,2 90 0,1 1.9999999999999996,0 L 130,0 L 130,0 A 2,2 90 0,1 132,1.9999999999999996 L 132,14 L 0,14 z" fill="transparent" stroke="none" transform="matrix(1, 0, 0, 1, 0, 0)"/> </g> <text x="66" y="9.866995239257813" text-anchor="middle" opacity="0.54" fill="black" stroke="none" transform="matrix(1, 0, 0, 1, 0, 35)">Text 1</text> </g> </g> </g> </g> <clipPath id="mainClip5855"> <rect x="0" y="0" width="1315" height="301"/> </clipPath> <clipPath id="CLIP5858"> <path d="M 24,5 L 299,5 L 299,21 L 24,21 z" opacity="0.8" transform="matrix(1, 0, 0, 1, 0, 0)"/> </clipPath> <linearGradient x1="0" x2="129" y1="40.5" y2="40.5" id="GRAD5860" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#FFD378"/> <stop offset="1" stop-color="#FFC857"/> </linearGradient> <linearGradient x1="0" x2="129" y1="40.5" y2="40.5" id="GRAD5861" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#FFD378 "/> <stop offset="1" stop-color="#FFC857"/> </linearGradient> </svg>
thanks!
When an svg element has display="none"
set, that element is rendered anyways, resulting in an incorrect pdf to be generated.
Example: https://jsfiddle.net/7r9r26vL/2/
Right now, if there are images within an svg, the software loads those images and renders them into a canvas to include the bitmap into the resulting PDF. That's perfect to bitmap images, however if the image is actually an SVG (possibly even an svg data-url) then it would be awesome to include that image as a vector/SVG image, directly.
Hi,
I see that foreignObject
SVG tag is not supported, for embedding HTML. Am I right?
Thanks
Hi,
I'm working on implementing this script in a use case with Highcharts, and I've found that if there's several tSpans on the same line, svg2pdf.js won't render correctly. I've made a fork of my own, and was wondering if you'd want to take a look at it. Highcharts fork
The issue is that the svg2pdf.js doesn't seem to care about the x and the y coordinates. It also has problems rendering bold and italic properties inside tSpan elements.
Are you open for suggestions as in the form of pull request?
Best regards,
Henrik Skar
Since canvas.toDataURL can throw a Security error if the canvas was tainted with an image that was loaded from a different origin, the export will fail completely in the case such images exist. We should try/catch that case and continue the export.
Missing images are better than no output at all most of the time.
Is it possible to convert a single SVG to PDF in multiple pages of Letter or A4 size?
I suppose dividing the original SVG into smaller ones may work but in my case the SVG is created by another javascript and hence not easy to break down (at least I don't know how).
Attribute vector-effect="non-scaling-stroke" for path, rect, line and others stops working.
No matter it's jsPdf v1.3.2 with svg2pdf 1.2.1 or jsPdf v2.0.0 with the latest version of svg2pdf.
In 1.1.1 it worked correctly.
Hi,
When I convert my svg file some shapes are not converted, and some unknown shapes are added.
I have my files at the repo below. For example lines inside the top rectangle are not drawn and two small black boxes appear at the corner of charts.
https://github.com/psamim/svg2pdf.js-test
(npm install
, ./node_modules/.bin/webpack ./entry.js bundle.js
, then open index.html
)
Thanks,
Samim
It appears when I add another page to the PDF and run svg2pdf a second time, that the PDF is empty.
I've just downloaded your repo and I using your example in a Vue/Webpack application. I'm getting this error ...
Uncaught TypeError: pt.saveGraphicsState is not a function
at e (svg2pdf.min.js?95fe:formatted:2203)
at VueComponent.getPDF (Charts.vue?6ddd:125)
import * as JsPdf from 'jspdf';
import * as svg2pdf from 'svg2pdf.js';
console.log('getPDF');
// Get svg markup as string
var svg = document.getElementById('svg-container');
// create a new jsPDF instance
const pdf = new JsPdf('l', 'pt', 'a4');
// render the svg element
svg2pdf(svg, pdf, {
xOffset: 0,
yOffset: 0,
scale: 1
});
// get the data URI
// const uri = pdf.output('datauristring');
// or simply safe the created pdf
pdf.save('myPDF.pdf');
},
Hi there yWorks,
It seems like font-family is not caught from the root element of the svg.
In my use case there are no serif font-families, and svg2pdf seems to put it to a serif.
Here's a demo for the issue: https://jsfiddle.net/henrikskar/mjpt2g7v/
Is there a way to fix this?
Thanks in advance for answers.
Best regards,
Henrik Skar
Image transparency does not work. Anything that is behind the transparency of another image will not be visible.
Take this SVG as example, which contains two rectangular images that have a transparent background:
image_transparency.zip
I guess this is due to the addImage function using jpeg instead of png. However, just replacing it with png does not seem to work properly. According to the comment in svg2pdf, png is not supported by jspdf. However, looking at the jspdf addImage function it actually lists png as supported image type.
Is there something we can do or is it just not feasible?
Hello.
Text in generated pdf doesn't have alignment and font size like in original svg.
Code:
const doc = new jsPDF(); result.forEach((page) => { svg2pdf(page, doc, { xOffset: 0, yOffset: 0, scale: 0.39, }); doc.addPage(); });
Example:
Original svg
PDF
PDF generated from canvas (convert svg to image and draw in canvas)
Maybe I did something wrong? Or need to add some settings to pdf?
Tried this simple code to check if will be some difference, nothing has changed.
doc.setFont('helvetica'); doc.setFontType('bold'); doc.setFontSize(20);
Thanks.
Hi there yWorks,
The browser crashes when I input an svg with arcs in svg2pdf. I'm running Chrome 55.0.2883.95 (64-bit).
Here's a simple demo to illustrate: jsFiddle.
Let me know if you have a fix for this.
Best regards,
Henrik Skar
Hi,
I am trying to use this library to export an svg element content as pdf but I am getting this error
Uncaught TypeError: pt.saveGraphicsState is not a function even though I have added the jsPDF library
Any help??
Thanks in advance
Support for polyline elements.
https://www.w3.org/TR/SVG11/shapes.html#PolylineElement
Hi there,
There seems to be an issue with rotation and positioning of text elements.
Here's a fiddle to show my problem: jsfiddle
If I comment out the following code in my local fork, the text element will render as I want.
That will however break some of your code, I guess.
if (m[1] && m[2]) {
var t1 = new _pdf.Matrix(1, 0, 0, 1, m[1], m[2]);
var t2 = new _pdf.Matrix(1, 0, 0, 1, -m[1], -m[2]);
resultMatrix = _pdf.matrixMult(t2, _pdf.matrixMult(resultMatrix, t1));
}
Can anything be done to solve my use case?
Best regards,
Henrik Skar
Hi Team,
Thanks for this great library.
I have use this libray to export svg on PDF but i am getting an error 👍
d.saveGraphicsState is not a funtion. Could you please help me out to fix this issue ?
why this error is coming. i have included two dependency ibray jspdf and svg2pdf .
Thanks,
An exception is thrown if an element has a clip-path and the referenced clipPath is not defined in the defs, but in the same element:
<g transform="matrix(0 -1 1 0 30 50)">
<text font-family="Arial" font-size="12px" font-style="normal" font-weight="normal" text-anchor="middle" fill="rgb(0,0,0)" fill-opacity="1" transform="translate(25 9)" clip-path="url(#ygc341_0)">
<tspan x="0" dy="0.9166666666666666em">LDC</tspan>
<tspan x="0" dy="1.5em">(Distributor)</tspan>
</text>
<clipPath id="ygc341_0">
<rect height="50" y="-9" x="-25" width="50"/>
</clipPath>
</g>
Throws Uncaught TypeError: Cannot read property 'hasAttribute' of undefined
. This seems to be due to the implementation only looking in the defs elements:
var clipPathNode = getFromDefs(svgIdPrefix.get() + clipPathId[1], defs); // <<<---- defs is empty
var clipPathMatrix = tfMatrix;
if (clipPathNode.hasAttribute("clipPathUnits") // <<<----- exception
&& clipPathNode.getAttribute("clipPathUnits").toLowerCase() === "objectboundingbox") {
bBox = getUntransformedBBox(node);
clipPathMatrix = _pdf.matrixMult(new _pdf.Matrix(bBox[2], 0, 0, bBox[3], bBox[0], bBox[1]), clipPathMatrix);
}
Maybe the clipPathNode access should be checked for null, though ideally the actual clipPath element should be found. Attached is a repo of the exception:
broken-clippath_html.txt
Exporting large areas to PDF yields an invalid size error in Acrobat Reader DC.
Please try the attached reproduction. It will create a blank 15000x15000 PDF that is opened correctly in Chrome, but throws an error in Acrobat Reader. If the file would have content, it would be clipped.
Note that I've also attached the ouput.pdf that is generated from the test case:
Is this a general PDF limitation or is there something wrong in svg2pdf or jsPDF? Maybe it can be fixed.
I'm not sure if this a svg2pdf.js
or a jsPDF
issue.
For an application I need to export a Highcharts chart as PDF using exportChartLocal
. When I call this method, this method eventually fails.
I managed to pin point the location where the error occurs:
in svg2pdf.js
:
`
// the actual svgToPdf function (see above)
var svg2pdf = function (element, pdf, options) {
_pdf = pdf;
var k = options.scale || 1.0,
xOffset = options.xOffset || 0.0,
yOffset = options.yOffset || 0.0;
// set offsets and scale everything by k
_pdf.saveGraphicsState();
_pdf.setCurrentTransformationMatrix(new _pdf.Matrix(k, 0, 0, k, xOffset, yOffset));
...
_pdf.restoreGraphicsState();
return _pdf;
}
`
The problem here is that the functions saveGraphicsState
, setCurrentTransformationMatrix
and restoreGraphicsState
are undefined. The method which creates the pdf
object in Highcharts looks like this:
pdf = new win.jsPDF( // eslint-disable-line new-cap
'l',
'pt', [width, height]
);
...
win.svg2pdf(svgElement, pdf,
removeInvalid: true
});
I've looked in the jsPDF code, but there is no single place where any of this functions are defined in the source code.
The question is: is this an svg2pdf.js
or an jsPDF
issue? And could it be that the versions I'm running right now are not compatible with each other?
I installed them using bower (1.8.2) and these are the versions:
$ bower info jsPDF
bower jsPDF#* cached https://github.com/MrRio/jsPDF.git#1.3.5
bower jsPDF#* validate 1.3.5 against https://github.com/MrRio/jsPDF.git#*
$ bower info svg2pdf.js
bower svg2pdf.js#* cached https://github.com/yWorks/svg2pdf.js.git#1.1.2
bower svg2pdf.js#* validate 1.1.2 against https://github.com/yWorks/svg2pdf.js.git#*
Should I install different versions of these packages?
See test20.html
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: highcharts/highcharts#6417 (comment)
<!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>
SVG documentation says: If the attribute is not specified, the effect is as if a value of "0" were specified.
Origin in line below is (0|0), but (NaN|NaN) in PDF.
<line x2="300" y2="150" stroke-width="3" stroke="black"/>
Hi,
I get the following error:
Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
at l (bundle.js:493)
at k (bundle.js:493)
at U (bundle.js:493)
at Q (bundle.js:493)
at Object.<anonymous> (bundle.js:58)
at __webpack_require__ (bundle.js:20)
at bundle.js:40
at bundle.js:43
I have put the files in a repo to test:
https://github.com/psamim/svg2pdf.js-test
(npm install , ./node_modules/.bin/webpack ./entry.js bundle.js, then open index.html)
Thanks,
Samim
Running npm install
on the master branch today gave me the following:
npm WARN engine [email protected]: wanted: {"node":">=0.12"} (current: {"node":"0.10.29","npm":"1.4.21"})
npm WARN engine [email protected]: wanted: {"node":">=4"} (current: {"node":"0.10.29","npm":"1.4.21"})
npm WARN engine [email protected]: wanted: {"node":">=4"} (current: {"node":"0.10.29","npm":"1.4.21"})
npm WARN engine [email protected]: wanted: {"node":">=4"} (current: {"node":"0.10.29","npm":"1.4.21"})
npm ERR! git clone [email protected]:github:chick307/adler32cs.js Cloning into bare repository '/home/pharmony/.npm/_git-remotes/git-github-com-github-chick307-adler32cs-js-029b2fc0'...
npm ERR! git clone [email protected]:github:chick307/adler32cs.js Permission denied (publickey).
npm ERR! git clone [email protected]:github:chick307/adler32cs.js fatal: Could not read from remote repository.
npm ERR! git clone [email protected]:github:chick307/adler32cs.js
npm ERR! git clone [email protected]:github:chick307/adler32cs.js Please make sure you have the correct access rights
npm ERR! git clone [email protected]:github:chick307/adler32cs.js and the repository exists.
npm ERR! git clone [email protected]:github:andyinabox/FileSaver.js Cloning into bare repository '/home/pharmony/.npm/_git-remotes/git-github-com-github-andyinabox-FileSaver-js-59c031cf'...
npm ERR! git clone [email protected]:github:andyinabox/FileSaver.js Permission denied (publickey).
npm ERR! git clone [email protected]:github:andyinabox/FileSaver.js fatal: Could not read from remote repository.
npm ERR! git clone [email protected]:github:andyinabox/FileSaver.js
npm ERR! git clone [email protected]:github:andyinabox/FileSaver.js Please make sure you have the correct access rights
npm ERR! git clone [email protected]:github:andyinabox/FileSaver.js and the repository exists.
npm ERR! notarget No compatible version found: adler32cs@'github:chick307/adler32cs.js#c6576b4ed91b4216973bf85d8478a49970934515'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["0.0.1"]
npm ERR! notarget
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! System Linux 4.9.49-moby
npm ERR! command "/usr/bin/nodejs" "/usr/bin/npm" "install"
npm ERR! cwd /application/vendor/assets/javascripts/svg2pdf.js
npm ERR! node -v v0.10.29
npm ERR! npm -v 1.4.21
npm ERR! code ETARGET
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! /application/vendor/assets/javascripts/svg2pdf.js/npm-debug.log
npm ERR! not ok code 0
Am I doing anything wrong?
Hi
Is there anyway to add custom font in pdf generation?
I have a custom font in my svg included with a def like this:
<defs>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
</style>
</defs>
Everything is fine in my svg, but when I convert to pdf, the default font is used.
Anything about this?
Many thanks
Live demo: https://jsfiddle.net/highcharts/7r9r26vL/1/
Expected attributes on the parent group to cascade down to children.
I'm getting the following error when trying to convert an SVG object using Vue.js
at e (svg2pdf.min.js?95fe:31)
at VueComponent.getPDF (Charts.vue?6ddd:110)
HTML
<div id="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
<rect height="100" width="100" style="stroke:#f7f7f7; fill: #74ad24" />
</svg>
</div>
Vue imports
import * as JsPdf from 'jspdf-yworks';
import * as svg2pdf from 'svg2pdf.js';
Function
getPDF () {
console.log('getPDF');
// Get svg markup as string
let svg = document.getElementById('svg-container').innerHTML;
svg = svg.replace(/\r?\n|\r/g, '').trim();
const pdf = new JsPdf('l', 'pt', 'a4');
// render the svg element
svg2pdf(svg, pdf, {
xOffset: 0,
yOffset: 0,
scale: 1
});
// get the data URI
// const uri = pdf.output('datauristring');
// or simply safe the created pdf
pdf.save('myPDF.pdf');
},
SVG string
"<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"><rect height="100" width="100" style="stroke: rgb(247, 247, 247); fill: rgb(116, 173, 36);"></rect></svg>"
Hi,
I get the following error:
Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
at l (bundle.js:493)
at k (bundle.js:493)
at U (bundle.js:493)
at Q (bundle.js:493)
at Object.<anonymous> (bundle.js:58)
at __webpack_require__ (bundle.js:20)
at bundle.js:40
at bundle.js:43
I have my files at the repo below.
https://github.com/psamim/svg2pdf.js-test
(npm install
, ./node_modules/.bin/webpack ./entry.js bundle.js
, then open index.html)
Thanks,
Samim
Hello,
I am working on converting musical notations in SVG to PDF. Considering that I am a novice to both SVG and PDF as well as JS, svg2pdf.js has been a huge help for me. One problem I face now is unwanted rectangular boxes around all the graphic elements. See this PDF file for example.
Any help would be greatly appreciated.
Hi,
I have the following error in my browser console:
Uncaught DOMException: Failed to execute 'getExtentOfChar' on 'SVGTextContentElement': The charnum provided (16) is greater than or equal to the maximum bound (16).
at t.calculateInitialPosition (webpack-internal:///./node_modules/poplar-annotation/dist/index.js:26:69370)
at t.render (webpack-internal:///./node_modules/poplar-annotation/dist/index.js:16:156850)
at t.eval [as _next] (webpack-internal:///./node_modules/poplar-annotation/dist/index.js:16:155676)
at t.__tryOrUnsub (webpack-internal:///./node_modules/poplar-annotation/dist/index.js:16:3228)
at t.next (webpack-internal:///./node_modules/poplar-annotation/dist/index.js:16:2419)
at r._next (webpack-internal:///./node_modules/poplar-annotation/dist/index.js:16:1471)
at r.next (webpack-internal:///./node_modules/poplar-annotation/dist/index.js:16:1142)
at i.eval (webpack-internal:///./node_modules/poplar-annotation/dist/index.js:16:40523)
at i.emit (webpack-internal:///./node_modules/poplar-annotation/dist/index.js:16:47422)
at t.set [as json] (webpack-internal:///./node_modules/poplar-annotation/dist/index.js:16:150073)
Well I know this issue looks like:
But I'm using v1.3.0,and it does appear.
Thanks,
Shay
setting jsPDF orientation option does not change anything. Looks like there are few lines commented in this version of jsPDF lib which prevents it from rotating.
font-weight attribute is being ignored for t-span object with a font-weight independent of the parent text object
Hi,
I have the following error in my browser console:
Uncaught DOMException: Failed to execute 'getExtentOfChar' on 'SVGTextContentElement': The charnum provided (0) is greater than or equal to the maximum bound (0).
at file:///home/samim/workspace/svg/bundle.js:493:17744
at d (file:///home/samim/workspace/svg/bundle.js:493:6223)
at j (file:///home/samim/workspace/svg/bundle.js:493:17661)
at U (file:///home/samim/workspace/svg/bundle.js:493:21556)
at file:///home/samim/workspace/svg/bundle.js:493:18144
at d (file:///home/samim/workspace/svg/bundle.js:493:6223)
at z (file:///home/samim/workspace/svg/bundle.js:493:18126)
at U (file:///home/samim/workspace/svg/bundle.js:493:21249)
at file:///home/samim/workspace/svg/bundle.js:493:18144
at d (file:///home/samim/workspace/svg/bundle.js:493:6223)
I also have uploaded the files to the following repo:
https://github.com/psamim/svg2pdf.js-test
(npm install
, ./node_modules/.bin/webpack ./entry.js bundle.js
, then open index.html
)
Thanks,
Samim
svg2pdf should understand things like
font-family=""Rounded Mplus 1c""
clip-path="url("#ygc4_0")"
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.