整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
文概述：如何使用 nodejs 在服务端将 html 批量转成 pdf 并客户端下载。
目标一：使用 node 在服务端实现 html 批量转成 pdf
分为两步：
自己转（存疑）？或者找个中间件。自己转的话。。。算了，找插件。
网上搜到了 html-pdf，看了下周下载量接近 7W，版本迭代 21 个，最近更新时间 latest，不错，整体满足心里预期。
api使用如图：
提供了三种接口：文件、stream 流、buffer。不同返回值类型，使用 toFile()需要 2 个参数：文件地址（末尾要有文件名）、回调函数。
toFile()结果会在指定文件夹生成 pdf 文件；
toStream()、toBuffer()可以在回调里拿到pdf文件数据流
目标二：将 PDF 传到客户端
怎么传输？
经过分析归纳，可以浓缩为 3 个点：
以下分析可以略过直接到结果：
分析：测试用的是 express 框架，那么可以排除原生 res.end()（存疑），为啥排除它？有 send 我干嘛还用 end；将 pdf 传向客户端又不是下载或写入文件，排除 createWriteStream()方法；PDF 文件可以自己跑过去吗？肯定不行！如果啥都不动能不能成功下载文件？也可以。链接下载，好像挺万能。base64 能用吗？。。。好像是图片在用！不知道对文件好使不好使（存疑）。
筛选后：
传输方法：res.send()、管道 pipe()；
传输内容：stream 流、buffer、下载链接；
使用下载链接：
经过分析了，下载链接肯定能实现这个功能！为什么呢？只要把 pdf 的文件路径用变量存下来，然后返回给前端，拿着绝对路径地址模拟点击下载应该就能实现！但这种方法并没有在真正意义上跟要传输的内容打交道，所以还值得继续探索。
最终决定使用，管道pipe()发送stream流输出PDF文件流到客户端
目标三：客户端可以成功接收并自动下载
网上搜索有：Windows.open（）方法，iframe 等。感觉都有点偏。
本文使用a标签实现，其他方法另行尝试。
ajax + a标签
$.ajax({
url:'url',
responseType:'blob',
success (res) {
console.log(res.toString('utf-8'));
// 创建 blob 对象，解析流数据
// , {
// 如何后端没返回下载文件类型，则需要手动设置：type: 'application/pdf;chartset=UTF-8' 表示下载文档为 pdf，如果是 word 则设置为 msword，excel 为 excel
// type: 'application/pdf;chartset=UTF-8'
// }
const blob = new Blob([res]);
const a = document.createElement('a')
// // 兼容 webkix 浏览器，处理 webkit 浏览器中 href 自动添加 blob 前缀，默认在浏览器打开而不是下载
const URL = window.URL || window.webkitURL
// // 根据解析后的 blob 对象创建 URL 对象
const herf = URL.createObjectURL(blob)
// 下载链接
// a.href = 'url'
a.href = herf
// // 下载文件名,如果后端没有返回，可以自己写 a.download = '文件.pdf'
a.download = '文件.pdf'
// document.body.appendChild(a)
a.click()
// document.body.removeChild(a)
// 在内存中移除 URL 对象
window.URL.revokeObjectURL(herf)
}
})传统jQuery接收数据流后，需要使用new Blob([res])再处理才能继续使用，
而，fetch也需要，不过简便多了
fetch+ a标签
//1.请求
let res = await fetch([地址]);
//2.解析
let data = res.blob()
//3.创建a标签
let eleA = document.createElement('a')
//4.创建鼠标事件对象
let e = document.createEvent("MouseEvents")
//5.初始化事件对象
e.initEvent("click", false, false)
document.body.appendChild(eleA)
eleA.download = 'index.zip'
eleA.href = data
//给指定的元素，执行事件 click 事件
eleA.dispatchEvent(e)
document.body.removeChild(eleA)报错：
eleA.href直接使用 blob 数据作为下载链接是不行的，必须使用 window.URL 对象，果然无知者无畏，更改后的代码如下：
//1.请求
let res=await fetch([地址]);
//2.解析
let data=await res.blob();
const a = document.createElement('a')
const URL = window.URL || window.webkitURL
const herf = URL.createObjectURL(data)
a.href = herf
a.download = '文件.zip'
a.click()
window.URL.revokeObjectURL(herf)使用 oFile() 测试
server.get('/', async (req, res) => {
toPdf(res);
});
function toPdf (res) {
let archive = archiver('zip', {
zlib: { level: 9 } // 设置压缩级别
});
archive.on('error', function(err){
throw err;
});
archive.pipe(res);
for (let i = 0; i < 100; i++) {
let html = `<div style="width: 100px;height:100px;background:#fff;color:red;font-size:16px;font-weight:bold">这是第 <span>${i}</span> 个 pdf</div>`;
pdf.create(html, options).toFile(`./static/${i}.pdf`, () => {
archive.glob('static/*')
archive.finalize()
})
}
}看命令窗口偶尔还会报 Queue Closed 错误；
观察发现程序一边转 pdf，一边下载，而且是按照顺序转换下载有 0.1.2.3...，最后压缩返回，这个过程循环很少时发现没问题，但次数增加很多后如20，100次，当for循环到最后一次时，直接执行archiver.finalize(),完。。。结束了，所以造成Queue Closed原因是没限制archiver.finalize()执行时机？？？
找证据：
官方文档显示：
// finalize the archive (ie we are done appending files but streams have to finish yet)
// 完成存档
// 'close', 'end' or 'finish' may be fired right after calling this method so register to them beforehand
// 调用此方法后，可能会立即触发“ close”，“ end”或“ finish”，因此请事先注册
archive.finalize();
果然，，
添加结束条件：
pdf.create(html, options).toFile(`./static/${i}.pdf`, () => {
if (i === 99) {
archive.glob('static/*')
archive.finalize()
}
})执行成功，Queue Closed没出现，并且在浏览器自动下载了一个压缩包，打开后
发现只有 91 个文件，缺少了最后几个文件，
for 循环明明执行了 100 次。百思不得解，开始我以为跟网络有关系，毕竟有传言只要（网络）够快什么（队列关闭）错误都追不上你。后来我发现用笔记本执行程序这个错误会频繁出现，
查看了 html-pdf 源码猜测会不会是同步在阻塞，导致循环结束后 PDF 生成文件还未完成导致 Queue Closed，怎么解决呢，闭包！具体原理未知（存疑），
经过修改
((html, i) => {
pdf.create(html).toFile(`./static/${i}.pdf`, () => {
if (i === 49) {
archive.glob('static/*')
archive.finalize();
}
})
})(html, i)成功！！！打开压缩文件查看文件总数，
一切正常，Good！
使用 toStream()测试
(function(html, i) {
pdf.create(html).toStream((err, stream) => {
archive.append(stream, { name: `${i}.pdf`});
if (i === 99) {
archive.finalize();
}
});
})(html, i)我去，第一次跑果然有问题，反复执行多次总是缺少前几个文件
第一次跑，少了第一个文件 1.pdf:
第二次，循环执行 50 次，结果只有 45 个成功，前 5 个失败:
命令行打印也证明了这一点。。。每次失败个数竟然还不同，但还好有个规律它们都是前几个
。。。
继续执行，竟然还有其他报错类型。。。无语。。
大致意思是:输入资源必须是 Stream 流或者 Buffer，可能是在使用 archiver.append 时塞入了 undefined 之类的，给它上个保险，如果值存在才执行
stream && archive.append(stream, { name: `${i}.pdf`});综合问题共有 2 个：1.并不是所有 html 片段都进行了转换 PDF 的操作，可能会随机出现遗漏，比如 45.46.突然就到 48；2.即使所有 html 都进行了转换操作，还总是缺少前面几个文件。
问题一解决：
html-pdf 源码如下图
研究发现 html-pdf 的 toStream 应该是一个异步方法，查看源码后 stream.on('end')也证明了这一点。由于不是顺序生成 stream 流，那么最后一个流生成并不代表所有都完成，所以当用 i===99 判断结束就有问题，可能会跳过某一个不执行转换PDF需要len=50来避免，然而添加过后，每个文件都进行了PDF转换，但是stream显示为undefined，进而PDF文件也总是少前面几个，导致 i=99 出现时还有好多 toStream 没有完成，SO 第一个问题就出现了；（注：不过异步操作也因此避免同步带来方法一的问题:队列关闭错误。）
原因找到，解决办法就是添加变量手动强行控制进程：
如图，len 初始 100，减为 0 时代表所有都已经转换，可以结束
let len = 100;
然后，开始计数，不到最后一个完成 stream 流转换不结束
pdf.create(html).toStream((err, stream) => {
len--;
stream && archive.append(stream, { name: `${i}.pdf`});
if (len === 0) {
archive.finalize();
}
});命令行打印下错误信息看看怎么回事控制台
问题二解决：
先打印下错误信息 console.log('err：', err)
暴露了，PDF generation timeout. 一个 timeout 已经够了，能够说明很多问题，html-pdf 提供了转换超时限制，时间超出 timeout 自然无法成功转换成 stream 流输出，解决办法更简单：
官方文档，给出了一个配置项 options:{}对象，其中就有 timeout 设置，我们可以视情况放大此参数，
// 一分钟内转 pdf 不成功，则视为失败
let options = {
timeout: 60000
}
pdf.create(html, options).toStream((err, stream) => {
。。。。。。
});继续测试，终于完成。。。
结语：
1.本文走了许多弯路，踩了多多个坑；
2.文中标记存疑的地方依然有很多，都是等待去学习理解的地方；
3.对于名词、问题的解释描述不够精准透彻，需要深度挖掘对知识点的认知；
4.对问题的解决方式不够标准、熟练，这才是造成多走弯路的原因；
5.虽然解决问题才是我们的最终目的，但是仍需追求解决方式的多样化，找到问题的根源 格物致知 才能给自己醍醐灌顶之感；
文转载自微信公众号「全栈修仙之路」，作者阿宝哥。转载本文请联系全栈修仙之路公众号。
在日常工作中，文件上传是一个很常见的功能。在上传文件时，我们可以选择上传单个文件，也可以通过设置 multiple 属性来上传多个文件。
本文阿宝哥将介绍如何上传目录及如何压缩目录并上传，压缩目录的功能是通过 JSZip 这个库来实现。利用这个库还可以实现在线预览 ZIP 文件的功能，感兴趣的小伙伴可以阅读 JavaScript 如何在线解压 ZIP 文件? 这篇文章。下面我们先来介绍如何实现压缩目录并上传的功能。
1.1 选择目录
在浏览器端，要实现压缩目录并上传的功能。首先我们要先实现选择目录的功能，要实现该功能，我们可以直接使用 HTMLInputElement 元素的 webkitdirectory 属性：
<input type="file" id="uploadFile" webkitdirectory /> 当设置了 webkitdirectory 属性之后，我们就可以选择目录了。当阿宝哥选择了 useAxios 目录之后，就会显示以下确认框：
点击上传按钮之后，我们就可以获取文件列表。列表中的文件对象上含有一个 webkitRelativePath 属性，用于表示当前文件的相对路径。在进行目录压缩的时候，我们就会使用到该属性。
虽然通过 webkitdirectory 属性可以很容易地实现选择目录的功能，但在实际项目中我们还需要考虑它的兼容性。比如在 IE 11 以下的版本就不支持该属性，其它浏览器的兼容性如下图所示：
(图片来源 —— https://caniuse.com/?search=webkitdirectory)
1.2 压缩目录
在 JavaScript 如何在线解压 ZIP 文件? 这篇文章中，阿宝哥介绍了在浏览器端如何使用 JSZip 这个库实现在线解压 ZIP 文件的功能。JSZip 这个库除了可以解析 ZIP 文件之外，它还可以用来创建和编辑 ZIP 文件。这里阿宝哥基于 JSZip 库提供的 API，封装了一个 generateZipFile 函数：
function generateZipFile(
zipName, files,
options = { type: "blob", compression: "DEFLATE" }
) {
return new Promise((resolve, reject) => {
const zip = new JSZip();
for (let i = 0; i < files.length; i++) { // 添加目录中包含的文件
zip.file(files[i].webkitRelativePath, files[i]);
}
zip.generateAsync(options).then(function (blob) { // 生成zip文件
zipName = zipName || Date.now() + ".zip";
const zipFile = new File([blob], zipName, {
type: "application/zip",
});
resolve(zipFile);
});
});
} 在以上代码中，我们使用 file(name, data [,options]) 方法，把目录中的文件依次添加到 zip 对象中，然后再通过 generateAsync 方法来生成 ZIP 文件。在生成 ZIP 文件时，我们可以设置该文件的类型。这里我们设置的默认类型为 blob 类型，除了支持 blob 类型之外，它还支持 base64、uint8array 和 arraybuffer 等类型。
1.3 上传压缩 ZIP 文件
在压缩目录生成 ZIP 文件之后，我们就可以通过 XMLHttpRequest 或 fetch API 来上传压缩文件。下面阿宝哥将以 axios 为例，来实现文件上传的功能。
html 代码
<input type="file" id="uploadFile" webkitdirectory />
<button id="submit" onclick="uploadFile()">上传文件</button> js 代码
const uploadFileEle = document.querySelector("#uploadFile");
const uploadOptions = { needZip = true };
const request = axios.create({
baseURL: "http://localhost:3000/",
timeout: 5000,
});
async function uploadFile({ needZip } = uploadOptions) {
if (!uploadFileEle.files.length) return;
let fileList = uploadFileEle.files;
if (needZip) { // 对目录进行ZIP压缩
let webkitRelativePath = fileList[0].webkitRelativePath;
let zipFileName = webkitRelativePath.split("/")[0] + ".zip";
fileList = [await generateZipFile(zipFileName, fileList)];
}
uploadFiles({ // 上传文件列表
url: "/upload/multiple",
files: fileList,
});
} 在 uploadFile 函数中，如果有启用目录压缩功能，我们就会调用 generateZipFile 函数生成 ZIP 文件，如果没有的话，就会直接调用 uploadFiles 函数来上传目录中的所有文件，当然你也可以对文件列表进行过滤，比如限制文件类型或文件的大小等。
下面我们来看一下 uploadFiles 函数的具体实现：
function uploadFiles({ url, files, fieldName = "file" }) {
if (!url || !files.length) return;
let formData = new FormData();
for (let i = 0; i < files.length; i++) {
formData.append(fieldName, files[i], files[i].name);
}
return request.post(url, formData);
} 在 uploadFiles 函数中，我们通过创建 FormData 对象来保存文件的信息，然后通过 request(axios 实例)来执行上传操作。
2.1 接收 ZIP 文件
在服务端要实现文件上传功能也比较简单，这里阿宝哥以 koa 为例来实现文件上传的功能。如果你对 koa 还不了解的话，建议你先大致浏览一下 koa 的官方文档。
const path = require("path");
const Koa = require("koa");
const cors = require("@koa/cors");
const multer = require("@koa/multer");
const Router = require("@koa/router");
const app = new Koa();
const router = new Router();
const UPLOAD_DIR = path.join(__dirname, "/public/upload");
const storage = multer.diskStorage({
destination: async function (req, file, cb) { // 设置文件的存储目录
cb(null, UPLOAD_DIR);
},
filename: function (req, file, cb) { // 设置文件名
cb(null, `${file.originalname}`);
},
});
const multerUpload = multer({ storage });
router.get("/", async (ctx) => {
ctx.body = "压缩文件目录上传示例（阿宝哥）";
});
router.post(
"/upload/multiple",
multerUpload.fields([
{
name: "file",
},
]),
async (ctx, next) => {
ctx.body = {
status: "success",
msg: "文件上传成功",
};
}
);
// 注册中间件
app.use(cors());
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000, () => {
console.log("app starting at port 3000");
}); 在以上代码中，我们通过 @koa/multer 这个中间件来处理文件上传，对该中间件感兴趣的小伙伴，可以自行阅读官方文档。接下来，我们来继续讨论另一个问题 —— 如何接收目录并按照文件目录结构进行存放?
2.2 接收文件目录
前面我们已经知道，当 input[type="file"] 使用了 webkitdirectory 属性之后，返回 File 对象的 webkitRelativePath 属性就会存放当前文件相对于当前目录的相对路径：
因此当我们在服务端处理文件目录上传的功能时，我们就可以通过该属性来创建对应的目录结构，具体的处理逻辑如下所示：
const fse = require("fs-extra");
const storage = multer.diskStorage({
destination: async function (req, file, cb) {
// 把useAxios@demo.vue中的@替换为路径分隔符
let relativePath = file.originalname.replace(/@/g, path.sep);
let index = relativePath.lastIndexOf(path.sep);
let fileDir = path.join(UPLOAD_DIR, relativePath.substr(0, index)); // 生成文件路径
await fse.ensureDir(fileDir); // 确保当前目录存在
cb(null, fileDir);
},
filename: function (req, file, cb) {
let parts = file.originalname.split("@"); // 对路径进行拆分
cb(null, `${parts[parts.length - 1]}`); // 获取文件名
},
}); 为什么 originalname 文件原始名称会包含 @ 符号呢?这样因为使用 useAxios/demo.vue 这种路径形式时，是不能获取到完整的路径名称，只能获取到文件名。为了解决这个问题，阿宝哥在上传文件时，手动把文件相对路径中的 / 符号替换为 @ 然后再进行上传，对应的处理逻辑如下：
function uploadFiles({ url, files, fieldName = "file" }) {
if (!url || !files.length) return;
let formData = new FormData();
for (let i = 0; i < files.length; i++) {
formData.append(fieldName, files[i], files[i].webkitRelativePath.replace(/\//g, "@"));
}
return request.post(url, formData);
} 好的，压缩目录上传和目录上传已经介绍完了，感兴趣的小伙伴可以动手试试看。由于完整的示例代码内容比较多，阿宝哥就不放具体的代码了。有需要的小伙伴，可以访问以下地址浏览示例代码。
https://gist.github.com/semlinker/af57349c16d203cc2ec845d4b5a6b445
注意：以上代码仅供参考，请根据实际业务进行调整。
本文阿宝哥介绍了如何利用 input[type="file"] 元素的 webkitdirectory 属性来实现选择目录的功能，然后利用 JSZip 这个库来实现目录压缩，最后通过 axios 来上传目录压缩后的 ZIP 文件 。此外，阿宝哥还介绍了如何使用 koa 来实现接收目录并按照文件目录结构进行存放的功能。
JSZip 官方文档
MDN - webkitdirectory
JavaScript 如何在线解压 ZIP 文件?
*请认真填写需求信息，我们会在24小时内与您取得联系。
