zip.js
显着特点
- 支持Zip64 格式
- 支持WinZIP AES和 PKWare ZipCrypto 加密
- 支持同时读取和写入一个或多个 zip 文件
- 集成工作池管理器
- 无第三方依赖
该库依赖于Promise、TypedArray、 Streams API 以及以下可选的 API:
- Web Workers
- Compression Streams
- Web Crypto
兼容性
该库与最新版本的 Chrome、Firefox、Safari、Microsoft Edge 和 Deno 完全兼容。
Naive UI
比较完整
有超过 80 个组件,希望能帮你少写点代码。
顺便一提,它们全都可以 treeshaking。
主题可调
我们提供了一个使用 TypeScript 构建的先进的类型安全主题系统。你只需要提供一个样式覆盖的对象,剩下的都交给我们。
顺便一提,不用 less、sass、css 变量,也不用 webpack 的 loaders。以及你可以试试右下角的主题编辑器。
使用 TypeScript
Naive UI 全量使用 TypeScript 编写,和你的 TypeScript 项目无缝衔接。
顺便一提,你不需要导入任何 CSS 就能让组件正常工作。
快
我尽力让它不要太慢。至少 select、tree、transfer、table、cascader 都可以用虚拟列表。
顺便一提,...,没有顺便了。祝你使用愉快。
代码示例
使用Upload组件上传文件
<n-upload
v-model:file-list="fileList"
:show-file-list="true"
:on-before-upload="onUpload"
:on-remove="onRemove"
accept="application/zip"
list-type="image"
max="1"
>
<n-upload-dragger>
<div mb-2>
<NIcon size="35" :depth="3" :component="Upload" />
</div>
<div op-60>
点击选择,或将zip文件拽到此处
</div>
</n-upload-dragger>
</n-upload>
import * as zip from '@zip.js/zip.js';
const fileList = ref();
const fileInput = ref() as Ref<File>;
const allData = ref([]);
const data = ref([]);
async function onUpload({ file: { file } }: { file: UploadFileInfo }) {
if (file) {
fileInput.value = file;
allData.value = [];
const reader = new zip.ZipReader(new zip.BlobReader(file));
const entries = await reader.getEntries();
if (entries.length) {
for (const entry of entries) {
allData.value.push(formatFileEntry(entry));
}
}
reader.close();
let result = allData.value.filter(item => item.parent === '');
if (!result.length) {
result = allData.value.filter(item => item.level === 2);
}
data.value = result
.map((item) => {
return {
label: item.fileName,
key: item.fullFileName,
isLeaf: !item.isDir,
disabled: item.isDir,
// children: [],
...item,
};
})
.sort((a, b) => (a.isDir === b.isDir ? 0 : a.isDir ? -1 : 1));
}
}
async function onRemove() {
fileInput.value = null;
allData.value = [];
data.value = [];
selectFile.value = null;
}
使用Tree组件显示文件列表
<n-tree
block-line
:data="data"
:on-load="handleLoad"
:expanded-keys="expandedKeys"
expand-on-click
:render-prefix="renderPrefix"
:render-suffix="renderSuffix"
:render-label="renderLabel"
:node-props="nodeProps"
virtual-scroll
style="max-height: 400px"
@update:expanded-keys="handleExpandedKeysChange"
@update:selected-keys="handleSelectedKeysChange"
/>
<div v-if="selectFile" mt-5 flex justify-center>
<c-button @click="downloadFile">
下载文件
</c-button>
</div>
const expandedKeys = ref<string[]>([]);
function handleExpandedKeysChange(changeExpandedKeys: string[]) {
expandedKeys.value = changeExpandedKeys;
}
function handleSelectedKeysChange(selectedKeys: string[], selectNodes: TreeOption[]) {
selectFile.value = selectNodes[0];
}
async function handleLoad(node: TreeOption) {
const result = allData.value.filter(item => item.parent === node.fullFileName);
node.children = result
.map((item) => {
return {
label: item.fileName,
key: item.fullFileName,
isLeaf: !item.isDir,
disabled: item.isDir,
// children: [],
...item,
};
})
.sort((a, b) => (a.isDir === b.isDir ? 0 : a.isDir ? -1 : 1));
}
function renderPrefix({ option }: { option: TreeOption }) {
if (option.isDir) {
return h(NIcon, null, { default: () => h(Folder) });
}
return h(NIcon, null, { default: () => h(File) });
}
function renderSuffix({ option }: { option: TreeOption }) {
return h('span', null, {
default: () => {
if (option.entry.uncompressedSize) {
return formatBytes(option.entry.uncompressedSize);
}
else {
return '';
}
},
});
}
function renderLabel({ option }: { option: TreeOption }) {
return h(NEllipsis, { tooltip: false }, { default: () => option.label });
}
async function downloadFile() {
if (!selectFile.value) {
return;
}
const dataUrl = URL.createObjectURL(await selectFile.value.entry.getData(new zip.BlobWriter(), {}));
const a = document.createElement('a');
a.href = dataUrl;
a.download = selectFile.value.label;
a.click();
}
效果可参考:文章来源:https://www.toymoban.com/news/detail-826003.html
在线ZIP解压工具 - BTool在线工具软件,为开发者提供方便。在线ZIP解压工具是一款便捷高效的云端压缩文件处理助手,无需下载安装任何软件,即可一键上传、在线解压ZIP格式的文件。它具备高速稳定、安全可靠的特点,完美支持大容量ZIP文件快速解压,让您随时随地轻松处理各类压缩文档,极大地提升了办公与学习效率。https://www.btool.cn/unzip文章来源地址https://www.toymoban.com/news/detail-826003.html
到了这里,关于使用@zip.js/zip.js与naive-ui的Tree组件实现在线文件解压预览的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!