本篇博客讲述一下svg如何转换为pdf和png
这里的关键点在于先获取svg的base64格式,以及将base64格式转换为pdf和png,直接上源码
async replaceImgPromise(svgData, i){
return new Promise((resolve => {
let imageUrl = /href="([^"]*)"/.exec(svgData[i])[1];
let imageId = /href="http:\/\/211\.87\.232\.197:8081\/sdudoc\/img\/get_by_id\?id=([^"]*)"/.exec(svgData[i])[1];
this.$http({
method: 'post',
url: 'http://211.87.232.198:8081/search-engine/solr/getPNG',
params: {
pid: String(imageId)
}
}).then(res => {
console.log(res.data)
svgData[i] = svgData[i].replace(imageUrl, res.data);
resolve();
});
}));
},
async replaceImgPromiseAll(svgData){
return new Promise((resolve => {
let imageUrls = [];
let imageIds = []
for(let i = 0; i < svgData.length; i++){
imageUrls[i] = /href="([^"]*)"/.exec(svgData[i])[1];
let id = /href="http:\/\/211\.87\.232\.197:8081\/sdudoc\/img\/get_by_id\?id=([^"]*)"/.exec(svgData[i]);
id = id || /href="http:\/\/211\.87\.232\.197:8080\/img\/get_by_id\?id=([^"]*)"/.exec(svgData[i]);
imageIds[i] = id[1];
}
this.$http({
method: 'post',
url: 'http://211.87.232.198:8081/search-engine/solr/getPNGs',
data: qs.stringify({
pids: JSON.stringify(imageIds)
})
}).then(res => {
for(let i = 0; i < svgData.length; i++){
svgData[i] = svgData[i].replace(imageUrls[i], res.data[i]);
}
resolve();
});
}));
},
async svg2ImagePromise(svgData, i, dataUrls, width, height, padding){
return new Promise((resolve => {
let source = '<?xml version="1.0" standalone="no"?>\r\n' + svgData[i];
let image = new Image;
// 解决跨域 Canvas 污染问题
// image.setAttribute("crossOrigin", "anonymous");
image.onload = function() {
let realWidth = width - padding * 2;
let realHeight = realWidth / width * height ;
context.drawImage(image, padding, padding, realWidth, realHeight);
dataUrls[i] = canvas.toDataURL("image/png");
resolve();
}
image.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
let canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
let context = canvas.getContext("2d");
context.fillStyle = '#FFFFFF';
context.fillRect(0, 0, width, height);
}));
},
async svg2png(){
let pageWidth = 2480;
let pageHeight = 3508;
let drawWidth = pageWidth;
let drawHeight = drawWidth / 592.28 * 841.89;
drawWidth /= this.slider_value;
drawHeight /= this.slider_value;
let padding = drawWidth * 0.05;
let dataUrls = [];
for(let i = 0; i < this.svg.length; i++){
await this.svg2ImagePromise(this.svg, i, dataUrls, drawWidth, drawHeight, padding);
// let a = document.createElement("a");
// a.download = "Atlas.png";
// a.href = dataUrls[i];
// a.click();
}
let zip = new JSZip();
let folder = zip.folder(this.detail.title);
for(let i = 0; i < dataUrls.length; i++){
folder.file(this.detail.title + "_" + i + ".png", dataUrls[i].substring(22), {
base64: true
});
}
let title = this.detail.title;
zip.generateAsync({ type: "blob" }).then(function(content) {
FileSaver.saveAs(content, title + ".zip");
});
},
async svg2pdf(){
let pageWidth = 2480;
let pageHeight = 3508;
let drawWidth = pageWidth;
let drawHeight = drawWidth / 592.28 * 841.89;
drawWidth /= this.slider_value;
drawHeight /= this.slider_value;
let pdfImageWidth = 595.28;
let pdfImageHeight = 592.28 / drawWidth * drawHeight;
let padding = drawWidth * 0.05;
let dataUrls = [];
for(let i = 0; i < this.svg.length; i++){
await this.svg2ImagePromise(this.svg, i, dataUrls, drawWidth, drawHeight, padding);
// let a = document.createElement("a");
// a.download = "Atlas.png";
// a.href = dataUrls[i];
// a.click();
}
let pdf = new jspdf.jsPDF('p', 'pt', 'a4');
for(let i = 0; i < dataUrls.length; i++){
pdf.addImage(dataUrls[i], 'PNG', 0, 0, pdfImageWidth, pdfImageHeight);
if(i !== dataUrls.length - 1) pdf.addPage();
}
pdf.save(this.detail.title + ".pdf");
},
这里转换成png多做了一步压缩,最终获取的是压缩包