Html2canvas vs jspdf can't export svg in PDF file
up vote
0
down vote
favorite
I use html2canvas vs jsPDF in my Reactjs project and I had a required that's export a DOM node to PDF file. When I exported, HTML and CSS was keeped just SVG can't. I dont know why. Have another package on client can help me? Thank for your attetion.
Here is my code to export
const filename = 'TyVan.pdf';
html2canvas(document.querySelector('#buivanty'),scale: quality).then(canvas =>
let pdf = new jsPDF('l', 'mm', 'a4', true)
pdf.addImage(canvas.toDataURL('image/png', 1.0), 'png', 10, 10, 180, 150);
pdf.save(filename);
)
reactjs jspdf html2canvas
add a comment |
up vote
0
down vote
favorite
I use html2canvas vs jsPDF in my Reactjs project and I had a required that's export a DOM node to PDF file. When I exported, HTML and CSS was keeped just SVG can't. I dont know why. Have another package on client can help me? Thank for your attetion.
Here is my code to export
const filename = 'TyVan.pdf';
html2canvas(document.querySelector('#buivanty'),scale: quality).then(canvas =>
let pdf = new jsPDF('l', 'mm', 'a4', true)
pdf.addImage(canvas.toDataURL('image/png', 1.0), 'png', 10, 10, 180, 150);
pdf.save(filename);
)
reactjs jspdf html2canvas
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I use html2canvas vs jsPDF in my Reactjs project and I had a required that's export a DOM node to PDF file. When I exported, HTML and CSS was keeped just SVG can't. I dont know why. Have another package on client can help me? Thank for your attetion.
Here is my code to export
const filename = 'TyVan.pdf';
html2canvas(document.querySelector('#buivanty'),scale: quality).then(canvas =>
let pdf = new jsPDF('l', 'mm', 'a4', true)
pdf.addImage(canvas.toDataURL('image/png', 1.0), 'png', 10, 10, 180, 150);
pdf.save(filename);
)
reactjs jspdf html2canvas
I use html2canvas vs jsPDF in my Reactjs project and I had a required that's export a DOM node to PDF file. When I exported, HTML and CSS was keeped just SVG can't. I dont know why. Have another package on client can help me? Thank for your attetion.
Here is my code to export
const filename = 'TyVan.pdf';
html2canvas(document.querySelector('#buivanty'),scale: quality).then(canvas =>
let pdf = new jsPDF('l', 'mm', 'a4', true)
pdf.addImage(canvas.toDataURL('image/png', 1.0), 'png', 10, 10, 180, 150);
pdf.save(filename);
)
reactjs jspdf html2canvas
reactjs jspdf html2canvas
asked Nov 8 at 14:16
Tý Văn
61
61
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
I was able to resolve it by doing post processing using onClone option
const options =
scale: 1,
foreignObjectRendering: true,
onclone: (element) =>
const svgElements: any = element.body.getElementsByTagName('svg');
Array.from(svgElements).forEach((svgElement) =>
const bBox: any = svgElement.getBBox();
svgElement.setAttribute('width', bBox.width);
svgElement.setAttribute('height', bBox.height);
);
,
;
html2canvas(<HTMLScriptElement>document.querySelector('.main-container'), options).then(canvas =>
this.clipImage = canvas.toDataURL('image/png');
);
Can I custom width and height of svg? :))). This code was great. just had a problems about svg size :)) Thank you very much
– Tý Văn
Nov 9 at 2:31
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
I was able to resolve it by doing post processing using onClone option
const options =
scale: 1,
foreignObjectRendering: true,
onclone: (element) =>
const svgElements: any = element.body.getElementsByTagName('svg');
Array.from(svgElements).forEach((svgElement) =>
const bBox: any = svgElement.getBBox();
svgElement.setAttribute('width', bBox.width);
svgElement.setAttribute('height', bBox.height);
);
,
;
html2canvas(<HTMLScriptElement>document.querySelector('.main-container'), options).then(canvas =>
this.clipImage = canvas.toDataURL('image/png');
);
Can I custom width and height of svg? :))). This code was great. just had a problems about svg size :)) Thank you very much
– Tý Văn
Nov 9 at 2:31
add a comment |
up vote
0
down vote
I was able to resolve it by doing post processing using onClone option
const options =
scale: 1,
foreignObjectRendering: true,
onclone: (element) =>
const svgElements: any = element.body.getElementsByTagName('svg');
Array.from(svgElements).forEach((svgElement) =>
const bBox: any = svgElement.getBBox();
svgElement.setAttribute('width', bBox.width);
svgElement.setAttribute('height', bBox.height);
);
,
;
html2canvas(<HTMLScriptElement>document.querySelector('.main-container'), options).then(canvas =>
this.clipImage = canvas.toDataURL('image/png');
);
Can I custom width and height of svg? :))). This code was great. just had a problems about svg size :)) Thank you very much
– Tý Văn
Nov 9 at 2:31
add a comment |
up vote
0
down vote
up vote
0
down vote
I was able to resolve it by doing post processing using onClone option
const options =
scale: 1,
foreignObjectRendering: true,
onclone: (element) =>
const svgElements: any = element.body.getElementsByTagName('svg');
Array.from(svgElements).forEach((svgElement) =>
const bBox: any = svgElement.getBBox();
svgElement.setAttribute('width', bBox.width);
svgElement.setAttribute('height', bBox.height);
);
,
;
html2canvas(<HTMLScriptElement>document.querySelector('.main-container'), options).then(canvas =>
this.clipImage = canvas.toDataURL('image/png');
);
I was able to resolve it by doing post processing using onClone option
const options =
scale: 1,
foreignObjectRendering: true,
onclone: (element) =>
const svgElements: any = element.body.getElementsByTagName('svg');
Array.from(svgElements).forEach((svgElement) =>
const bBox: any = svgElement.getBBox();
svgElement.setAttribute('width', bBox.width);
svgElement.setAttribute('height', bBox.height);
);
,
;
html2canvas(<HTMLScriptElement>document.querySelector('.main-container'), options).then(canvas =>
this.clipImage = canvas.toDataURL('image/png');
);
answered Nov 8 at 18:15
pujoey
1058
1058
Can I custom width and height of svg? :))). This code was great. just had a problems about svg size :)) Thank you very much
– Tý Văn
Nov 9 at 2:31
add a comment |
Can I custom width and height of svg? :))). This code was great. just had a problems about svg size :)) Thank you very much
– Tý Văn
Nov 9 at 2:31
Can I custom width and height of svg? :))). This code was great. just had a problems about svg size :)) Thank you very much
– Tý Văn
Nov 9 at 2:31
Can I custom width and height of svg? :))). This code was great. just had a problems about svg size :)) Thank you very much
– Tý Văn
Nov 9 at 2:31
add a comment |
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53209587%2fhtml2canvas-vs-jspdf-cant-export-svg-in-pdf-file%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password