安裝 npm install pako在Vue組件中引入pako:
import pako from 'pako';接口返回的url是這個字段 tableSsjsonUrl 其實打開就是壓縮包const source = await tableFileUrl ({ id: this.$route.query.id}); if(source.code === 0) {this.titleName = source.data.tableName}
if(source.code === 0 && source.data.tableSsjsonUrl) {const fileUrl = source.data.tableSsjsonUrlfetch(fileUrl, {headers: {'Cache-Control': 'no-cache'}}).then(response => response.blob()).then(blob => {const reader = new FileReader();reader.onload = () => {const compressedData = new Uint8Array(reader.result);const decompressedData = pako.ungzip(compressedData, { to: 'string' });this.spread.fromJSON(JSON.parse(decompressedData));};reader.readAsArrayBuffer(blob);}).catch(error => {console.error('Failed to fetch file:', error);});
}壓縮傳參如下let spreadJSON = JSON.stringify(this.spread.toJSON({ }));const uint8Array = new TextEncoder().encode(spreadJSON);// 進行gzip壓縮const compressedData = pako.gzip(uint8Array);// 將壓縮后的數據轉換成Blob類型并下載// const blob = new Blob([compressedData], { type: 'application/gzip' });// saveAs(blob, 'example.gz');// 創建FormData對象const formData = new FormData();// 將壓縮后的數據作為FormData的一部分formData.append('file', new Blob([compressedData]));formData.append('id', this.$route.query.id);console.log(formData.get('file'), '9999999999')try {// designInfoUpdateconst res = await updateTableFileGzip(formData);if (res.code === 0) {this.$modal.msgSuccess('保存成功!')} else {// this.$modal.msgError15('保存失敗!')}} catch (error) {// this.$modal.msgError15('保存失敗!')}
參考鏈接??Vue中如何進行文件壓縮與解壓縮?_vue壓縮文件_畢設徐師兄的博客-CSDN博客