我实际上是在创建一个有表格的网页,并且可以为表格的每一行创建一个pdf文件。然后,我有一个按钮,用于创建包含所有pdf的zip文件。现在我是这样的:
var printAll = function(descriptions) {
pdfs = [];
var zip = new JSZip();
var folder = zip.folder(`${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`);
descriptions.forEach(element => {
printPDF(element.desc_id, true);
})
pdfs.forEach(url => {
const blobPromise = fetch(url).then(r => {
if (r.status === 200) {
return r.blob();
}
return Promise.reject(new Error(r.statusText));
});
const name = url.substring(url.lastIndexOf('/'));
folder.file(name, blobPromise);
});
zip.generateAsync({ type: "blob" })
.then(blob => saveAs(blob, `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}.zip`))
.catch(e => console.log(e));
};
var printPDF = function(id, flag) {
var url_description = window.location.origin + "/description/" + id;
var url_template = window.location.origin + "/getTemplate";
// get image's path and coords
axios.get(url_template).then(response => {
coords = response.data.template;
imgData = response.data.template.path_image;
});
// get data in draggable
axios
.get(url_description, {
id: id
})
.then(response => {
getDataUri(imgData, function(dataUri) {
//console.log(dataUri);
generate(
dataUri,
response.data.description.expiration_date,
response.data.description.desc_code,
response.data.description.desc_description,
coords,
flag
);
});
});
};
function getDataUri(url, cb) {
var image = new Image();
image.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
canvas.getContext("2d").drawImage(this, 0, 0);
cb(canvas.toDataURL("image/jpeg"));
};
image.src = url;
}
function generate(img, date, barcode, description, coords, flag) {
var docDefinition = {
pageMargins: [0, 0],
content: [
{
unbreakable: true,
stack: [
{ image: img, width: 300, height: 300, absolutePosition: { x: 295.28, y: 541.82 } },
{
text: date,
background: "white",
color: "black",
absolutePosition: {
x: (coords.expiration_date_x * 300) / 400 + 295.28,
y: (coords.expiration_date_y * 300) / 400 + 541.82
}
},
{
text: barcode,
background: "white",
color: "black",
absolutePosition: { x: (coords.code_x * 300) / 400 + 295.28, y: (coords.code_y * 300) / 400 + 541.82 }
},
{
text: description,
background: "white",
color: "black",
relativePosition: {
x: (coords.description_x * 300) / 400 + 295.28,
y: (coords.description_y * 300) / 400 + 541.82
}
}
]
}]
};
if(flag) {
const pdfDoc = pdfMake.createPdf(docDefinition).getBlob(blob => {
var file = blob;
pdfs.push(file);
});
//pdfs.push(pdfDoc);
}
else {
pdfMake.createPdf(docDefinition).download(`${description}---${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}.pdf`);
}
}
我要实现的是使PDF数组充满blob(与printPDF函数生成的pdf对应,但是现在我得到一个空数组。可能我必须通过使用promises来实现,但是我不知道如何使用他们呢,有人可以帮我吗 预先感谢。