创建具有多个pdf的zip文件

时间:2019-01-28 12:14:08

标签: javascript pdfmake jszip

我实际上是在创建一个有表格的网页,并且可以为表格的每一行创建一个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来实现,但是我不知道如何使用他们呢,有人可以帮我吗 预先感谢。

0 个答案:

没有答案