jspdf与zip.js结合。解决转pdf文件清晰度与文件过大的问题

jspdf与zip.js结合。解决转pdf文件过大的问题

  • 一、问题产生:使用jspdf转换html到pdf清晰度不够
  • 二、问题解决:在jspdf.debug.js源代码中下载部分集成zip.js

一、问题产生:使用jspdf转换html到pdf清晰度不够

本人使用jspdf+html2canvas 清晰度达不到要求。采用放大画板,增加清晰度。但是与此同时生成的pdf文件过大,导致客户不满意。偶然发现使用压缩文件压缩后,一个十几M的文件可以压缩到100k不到。于是想到使用zip.js,下载的时候直接压缩为zip.既能提高效率,也能减少服务器存储压力

二、问题解决:在jspdf.debug.js源代码中下载部分集成zip.js

附zip.js下载地址
附我参考的demo地址
zip.js demo代码写的比较复杂。我只需要其中最关键的 将文件转化为zip的代码。

  1. 将zip.js中的 zip.js zip-ext.js z-worker.js放入项目的lib包目录下并引入。在这里插入图片描述

  2. 将deflate.js 和 z-worker.js放入项目入口html同级的目录下,这么做是因为zip.js中请求了该2个文件,找不到会报错;

  3. 修改js.pdf.debug.js第1131行左右,注释原有代码。添加如下代码。由于兼容性问题 ie可以不通过创建虚拟按钮的情况直接实现下载。为了兼容其他浏览器。需要在主页面中添加一个看不见的按钮。 我给他取了个id
    download-btn-123
    代码中我触发了虚拟事件实现下载。

    jspdf与zip.js结合。解决转pdf文件清晰度与文件过大的问题_第1张图片

附代码文本部分:

          var glob = getBlob();
          var name = options.split('.')[0];
          zip.createWriter(new zip.BlobWriter(), function (zipWriter) {
            zipWriter.add(options, new zip.BlobReader(glob), function () {
              zipWriter.close(function (blob) {

                if(typeof navigator.msSaveBlob == "function")
                {
                  navigator.msSaveBlob(blob, name+'.zip');
                  zipWriter = null;
                  return;
                }

                var blobURL = URL.createObjectURL(blob);
                var clickEvent;
                clickEvent = document.createEvent("MouseEvent");
                clickEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                var downloadButton = document.getElementById('download-btn-123');
                downloadButton.href = blobURL;
                downloadButton.download = name+"zip";
                downloadButton.dispatchEvent(clickEvent);
                creationMethodInput.disabled = false;
                fileList.innerHTML = "";
                zipWriter = null;
              });
            });
          }, onerror);

你可能感兴趣的:(前端技术)