NodeJs 生成指定目录的图片报告的 html 格式文档(递归子目录,报告内容包含文件名、尺寸、路径、预览图)
源码如下:
// 文件路径:image-report.js
/**
* NodeJs 生成指定目录的图片报告的 html 格式文档(递归子目录,报告内容包含文件名、尺寸、路径、预览图)
* 功能:生成指定目录的图片报告的 html 格式文档(递归子目录,报告内容包含文件名、尺寸、路径、预览图)
* 使用:node image-report.js
* 扩展包:无
*/
// 引用 fs 文件系统模块
const NmFs = require('fs');
// 引用 path 路径处理模块
const NmPath = require('path');
/**
* 生成文件报告指定目录
* @param {String} fromDir 来源目录
*/
async function reportFiles(fromDir) {
let filesData = [];
if (!NmFs.existsSync(fromDir)) {
console.log('path not exists: ', fromDir);
return filesData;
}
// 自动补齐路径符
const SEP = NmPath.sep;
if (!fromDir.endsWith(SEP)) {
fromDir += SEP;
}
// 打开目录
const dir = await NmFs.promises.opendir(fromDir);
// 声明变量,优化内存
let basename = '',
stat = null,
currentPath = '',
subFiles = [];
for await (const dirent of dir) {
// 当前路径
currentPath = fromDir + dirent.name;
// 处理目录
if (dirent.isDirectory()) {
// 如果当前路径是目录,则进入递归模式
subFiles = await reportFiles(currentPath + SEP);
if (subFiles && subFiles.length > 0) {
filesData = filesData.concat(subFiles);
}
continue;
}
// 处理文件
basename = NmPath.basename(dirent.name); // 带扩展名
stat = NmFs.statSync(currentPath);
filesData.push({
path: currentPath,
size: stat.size,
basename: basename
});
console.log('读取文件', currentPath);
}
return filesData;
}
//文件大小换算
function bytesFormatter(bytes = 0) {
if (bytes === 0) {
return '0 B';
}
let k = 1024,
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
let num = bytes / Math.pow(k, i);
// 优化:1023.999 KB 显示为 0.9xx MB
if (num > 1000) {
i += 1;
num = bytes / Math.pow(k, i);
}
return num.toPrecision(3) + ' ' + sizes[i];
}
// 执行生成报告文件的功能
async function run(fromDir, reportFilePath) {
let files = await reportFiles(fromDir).catch(err => console.log(err))
let html = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>报表</title>
<style>h5,p{padding:0;margin:0;}.d-flex{display:flex;flex-wrap:wrap;}.card{margin-top:10px;display:flex;}img{width:60px;height:60px;}.card-body{padding:0 10px;}</style>
</head>
<body>
<div class="d-flex">`;
NmFs.writeFileSync(reportFilePath, html);
let fileInfo = null;
for (let i in files) {
fileInfo = files[i];
html = `<div class="card">
<a href="${fileInfo.path}" target="_blank"><img src="${fileInfo.path}" alt=""></a>
<div class="card-body">
<h5 class="card-title">${fileInfo.basename}</h5>
<p class="card-text">${bytesFormatter(fileInfo.size)}</p>
</div>
</div>`;
NmFs.appendFileSync(reportFilePath, html);
}
html = `
</div>
</body>
</html>`;
NmFs.appendFileSync(reportFilePath, html);
console.log('报表已成功生成。详见: ', reportFilePath);
}
// 注意:运行时需修改一下路径信息
const DIR_PATH = 'F:\\Downloads\\Images';
const REPORT_FILE_PATH = './image-report-of-images.html';
// 运行入口
run(DIR_PATH, REPORT_FILE_PATH);
运行:
node image-report.js