blob - jszip如何解压压缩包并读取docx文件？

Question

我想使用jszip加载一个压缩包，获取里面的docx文件，返回一个文件地址或者xml，给wps加载项用，本来是想试一试blob是否可以，但是打出来的日志返回的是一个Blob {size: 10372, type: ''}，async里面的type写为string的时候，打出来的日志是个乱码

export async function getDocx(file) {    try {        // 创建一个JSZip实例        const zip = new JSZip();        // 使用JSZip加载压缩包        const zipData = await zip.loadAsync(file, {createFolders: true});        // 获取压缩包内的文件列表        const fileNames = Object.keys(zipData.files);        // 遍历文件列表并获取文件内容        for (const fileName of fileNames) {            const file = zipData.files[fileName];            console.log(fileName, file)            // 如果文件后缀是docx，返回            if (!file.dir && file.name.endsWith('.docx')) { // 确保是文件而不是目录，并且是.docx文件                // 以正确的MIME类型返回Blob                const docxBlob = await file.async('blob')                console.log(docxBlob)                return docxBlob            }            console.log(`文件名：${fileName}`);        }        // return fileNames    } catch (error) {        console.error('解压缩出错：', error);    }}

想知道一下这个该怎么办，wps加载项需要是一个docx地址，或者是一个xml文件

Answer 1

解码器格式设置为 gbk 就行了

const decoder = new TextDecoder("gbk")async function handleUpload(e) {    const files = e.target.files    outer: for (let i = 0; i < files.length; i++) {        const f = files[i]        const res = await zip.loadAsync(f, { decodeFileName: text => decoder.decode(text) })        for (const f in res.files) {            const target = res.files[f]            const data = await target.async("blob")            const file = new File([data], target.name, { type: data.type })            const result = await upload(target.name, file)            break outer        }    } }

Answer 2

在 JSZip 中，当你通过 async('blob') 方法获取文件内容时，你确实会得到一个 Blob 对象。Blob 对象代表了不可变的原始数据，它通常用于表示大二进制数据对象，如图片或文件。WPS 加载项可能不能直接接受一个 Blob URL 作为文件路径，因为它实际上是一个指向内存中数据的临时 URL。

但是，你可以创建一个指向这个 Blob 对象的 URL，然后尝试使用这个 URL。这可以通过使用 URL.createObjectURL() 方法来实现。此外，由于你的函数是异步的，你应该确保正确处理了异步操作的结果。

下面是如何修改你的代码以创建一个 Blob URL 的示例：

export async function getDocx(file) {    try {        // 使用JSZip加载压缩包        const zip = new JSZip();        const zipData = await zip.loadAsync(file); // 不需要 {createFolders: true}，因为这是加载操作        // 遍历文件列表并获取文件内容        for (const fileName of Object.keys(zipData.files)) {            const zipFile = zipData.files[fileName];            // 如果文件后缀是docx，返回            if (!zipFile.dir && fileName.endsWith('.docx')) {                const docxBlob = await zipFile.async('blob');                // 创建一个指向 Blob 的 URL                const docxUrl = URL.createObjectURL(docxBlob);                // 在这里，你可以返回 URL 或者将其传递给 WPS 加载项                console.log(docxUrl); // 打印 URL 用于调试                // 注意：当你不再需要这个 URL 时，应该使用 URL.revokeObjectURL(docxUrl) 释放它                // 如果 WPS 加载项支持 Blob URL，你可以直接返回它                return docxUrl;            }        }        // 如果没有找到 .docx 文件，你可能想要抛出一个错误或返回 null/undefined        throw new Error('没有找到 .docx 文件');    } catch (error) {        console.error('解压缩或处理文件出错：', error);        // 在这里处理错误，或者抛出一个新的错误        throw error;    }}

请注意，URL.createObjectURL() 创建的 URL 是临时的，并且在文档卸载时或者在调用 URL.revokeObjectURL() 时会被自动释放。如果你打算在长时间内使用这个 URL（例如，将其存储在某个地方以便稍后使用），那么你应该确保在不再需要它时调用 URL.revokeObjectURL() 以避免内存泄漏。

另外，请注意，WPS 加载项可能需要特定格式的 URL 或文件路径，因此请确保它支持 Blob URL，或者你可能需要将 Blob 保存到磁盘上的某个位置并返回该文件的路径（但这通常不推荐，因为它涉及写入文件系统，并可能受到浏览器安全策略的限制）。