使用JSzip

编程问答 2022-08-11

问题描述

我正在创建一个程序，该程序通过电子邮件接收发票，将其另存为bson在数据库中，然后使用节点zip进行读取和压缩，使用JSzip发送以进行反应和解压缩，然后从流转换为要映射到的blob数组反应组件。我设法使用jszip将api调用中的res.data转换为3个blob，并尝试在iframe上使用几种不同的格式化方法来显示pdf，但iframe不会在blob数组中加载任何pdf。如果有人可以提供帮助，我将非常感谢。

这是逐步调用快速调用组件中的渲染的完整代码。

从node和Mongo Grid-FS获取PDF 

router.get("/invoices/new",auth,async (req,res) => {
  const conn = mongoose.connection;
  const gfs = Grid(conn.db,mongoose.mongo);

  const period = JSON.parse(req.query.q);

  const { periodStart,periodEnd } = period;

  gfs.files
    .find({
      date: { $gte: periodStart,$lte: periodEnd },})
    .toArray(function (err,files) {
      if (err) {
        res.json(err);
      }

      console.log(files[0].file_data.buffer);
      const bufs = [];
      files.map((f,i) => {
        bufs[i]
          ? (bufs[i].path = f.file_data.buffer)((bufs[i].filename = f.filename))
          : (bufs[i] = {
              filename: f.filename,path: f.file_data.buffer,});
      });

      console.log(bufs);
      var zip = new require("node-zip")();
      let data;
      bufs.forEach((buf) => {
        zip.file(`${buf.filename}.file`,buf.path);

        data = zip.generate({ base64: false,compression: "DEFLATE" });
      });

      console.log(data.length);
      res.type("zip");
      res.send(new Buffer(data,"binary"));
    });
});

将承诺转化为处于反应状态的blob数组

  const getInvoiceList = async (ranges) => {
    const config = {
      responseType: "arraybuffer",};
    const qstring = JSON.stringify(ranges[0]);

    const res = await axios.get(`/api/mail/invoices/new?q=${qstring}`,config);

    let invoices = [];
    JSZip.loadAsync(res.data).then(function (zip) {
      Object.keys(zip.files).forEach(function (filename) {
        zip.files[filename].async("blob").then(async function (fileData) {
          invoices.push(fileData.slice(0,fileData.size,"application/pdf"));
        });
      });
    });

    dispatch({
      type: LIST_INVOICES,payload: invoices,});
  };

console.log（发票）

[]
0: Blob {size: 167263,type: "application/pdf"}
1: Blob {size: 236542,type: "application/pdf"}
2: Blob {size: 617702,type: "application/pdf"}
length: 3
__proto__: Array(0)

显示iframe的组件



  return (
<div>
      {invoices
        ? invoices.map((invoice) => (
            <iframe
              style={{ width: "563px",height: "666px" }}
              src={URL.createObjectURL(
                new Blob([invoice],{ type: "application/pdf" })
              )}
              type='application/pdf'
              title='title'
            />
          ))
        : ""}
    </div>
  );
};

谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptmongodbmongodbpdfpdfpdfreactjsreactjsreactjsreactjs