前端文件处理

文件预览

前端可预览的文件类型：

• 图片/视频/音频：直接用 img/video/audio 标签
• PDF：iframe 或 pdf.js
• Office 文档：微软 Office Online 预览。⚠️ 注意文档 URL 必须公网可访问，切勿用于内网或机密文档
• 文本/代码：pre 标签或 Monaco Editor 只读模式

Blob 对象

Blob 表示不可变的二进制数据。常用于：文件下载（URL.createObjectURL + a[download]）、图片预览（FileReader.readAsDataURL）、大文件分片上传（Blob.slice()）。

图片预加载

const preloadImage = (url) => new Promise((resolve, reject) => {
  const img = new Image(); img.onload = () => resolve(img); img.onerror = reject; img.src = url;
});
// 批量预加载并显示进度
urls.forEach(url => preloadImage(url).then(() => { loaded++; }));

html-to-image / html2canvas

html-to-image（推荐）： 使用 SVG foreignObject 渲染 DOM 为图片。 import { toPng } from 'html-to-image';

html2canvas： 使用 Canvas 手动绘制 DOM，兼容性更好但可能丢失样式。不支持 object-fit: cover（需手动裁切），跨域图片需 useCORS: true。

jsPDF + html2canvas 生成 PDF

const canvas = await html2canvas(element);
const pdf = new jsPDF();
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, pdf.internal.pageSize.getWidth(), 0);
pdf.save('download.pdf');

视频首帧缩略图

七牛云使用 vframe API：视频URL?vframe/jpg/offset/1 即可获取首帧。