陕西省城乡住房和建设厅网站,斗门区住房和城乡建设网站,自助建站什么意思,手机端做的优秀的网站设计jszip中文乱码的解决方案
jszip官方文档地址#xff1a;https://stuk.github.io/jszip/
1、问题分析
在JavaScript中需要用到对Zip压缩包进行操作时#xff0c;我们往往会使用jszip对压缩包进行编辑。
但是#xff0c;当我们使用jszip来读取包含中文名的文件时#xff…jszip中文乱码的解决方案
jszip官方文档地址https://stuk.github.io/jszip/
1、问题分析
在JavaScript中需要用到对Zip压缩包进行操作时我们往往会使用jszip对压缩包进行编辑。
但是当我们使用jszip来读取包含中文名的文件时文件名会出现乱码的情况。
下面的示例中我们使用jszip3.0版本来进行读取testZip.zip压缩包压缩包中有三个中文的docx文件。
import JSZip from jszip
import JSZipUtils from jszip-utilsexport function useJSZip() {JSZipUtils.getBinaryContent(../../public/testZip.zip, function (err, data) {if (err) {throw err}JSZip.loadAsync(data).then(function (zip) {console.log(zip.files)/* Ђ• DOCX ΄••1.docxЂ• DOCX ΄••2.docxЂ• DOCX ΄••3.docx*/})})
}代码中我们看到本应该为新建 DOCX 文档1.docx的文件名变为了乱码这种情况下使用file-saver进行保存时会出现问题。
通过查看jszip的官方文档我们可以看到jszip在读取文件名时对文件名默认使用UTF-8的文件名解码。
一般中文压缩文件中的文件名都以gbk形式进行编码而jszip在读取压缩包时使用UTF-8解码gbk编码的文件名这时就导致我们的文件名出现了乱码。
2、解决思路
通过上面的问题分析我们可以有两个解决思路。
1、第一个思路可以从jszip的编码上进行解决参考官方文档如果我们使用的是jszip3.0及以上的版本我们可以在loadAsync方法的options参数中自定义解码方法这样jszip在读取文件名解码时会以回调函数的形式执行并接受我们自定义的解码器所传入的文件名。
当然如果我们是想配合docxtemplater进行模板文档功能的实现时jszip3.0并不能满足需求因为docxtemplater仅仅支持到jszip2.0的版本和docxtemplater基于jszip2.0封装的pizzip。在jszip2.0中我们需要使用load方法来读取文件并在里面自定义解码器。pizzip是官方基于jszip2.0进行封装的更适合docxtemplater算法的一个包解决方法和使用方法与jszip2.0相同。
2、第二个思路是在压缩包文件本身进行解决将压缩包的中文编码改为utf-8即可。
3、解决方法
1、对于自定义编码我们可以使用第三方解码器iconv-lite来实现gbk的解码。
# 安装iconv-lite
npm i iconv-lite --save
# 在浏览器中运行时可能会报错缺少buffer包如果出错使用下面代码安装
npm i buffer -Djszip3.0解决方法
import JSZip from jszip
import JSZipUtils from jszip-utils
import iconv from iconv-liteexport function useJSZip() {JSZipUtils.getBinaryContent(../../public/testZip.zip, function (err, data) {if (err) {throw err}// 指定options编码器JSZip.loadAsync(data, {decodeFileName: function (bytes) {// 使用iconv-lite解码return iconv.decode(bytes, gbk)},}).then(function (zip) {console.log(zip.files)/* 新建 DOCX 文档1.docx新建 DOCX 文档2.docx新建 DOCX 文档3.docx*/})})
}jszip2.0解决方法
import JSZip from jszip
import JSZipUtils from jszip-utils
import iconv from iconv-liteexport function renderZip() {JSZipUtils.getBinaryContent(../../public/testZip.zip,function (err, data) {if (err) {throw err // or handle err}const zip new JSZip()zip.load(data, {decodeFileName: function (bytes) {// 使用iconv-lite库来解码gbkreturn iconv.decode(bytes, gbk)},})console.log(zip.files)/* 新建 DOCX 文档1.docx新建 DOCX 文档2.docx新建 DOCX 文档3.docx*/})
}pizzip解决方法
import PizZip from pizzip
import PizZipUtils from pizzip/utils/index.js
import iconv from iconv-liteexport function renderZip() {PizZipUtils.getBinaryContent(../../public/testZip.zip,function (err, data) {if (err) {throw err // or handle err}const zip new PizZip()zip.load(data, {decodeFileName: function (bytes) {// 使用iconv-lite库来解码gbkreturn iconv.decode(bytes, gbk)},})console.log(zip.files)/* 新建 DOCX 文档1.docx新建 DOCX 文档2.docx新建 DOCX 文档3.docx*/})
}注意
配合docxtempater时推荐采用官方封装的pizzip进行可以使用jszip2.0但不能使用jszip3.0及以上版本因为高版本jszip并没有被docxtemplater适配支持。使用jszip2.0和pizzip时调用函数的方法基本一致但是导入的方法不一致jszip在浏览器端读取本地文件时需要单独安装jszip-utils包进行二进制数据的读取。而pizzip将读取二进制文件的方法集成到包中只需要导入pizzip中的pizzip/utils/index.js即可。
