小学生课堂笔记

YoJ-茶叶蛋

已于 2024-03-27 00:22:45 修改

阅读量367

点赞数 7

文章标签：笔记

于 2023-12-19 09:04:26 首次发布

本文链接：https://blog.csdn.net/m0_46132840/article/details/135076198

版权

本文讲述了开发者在项目中遇到的几个技术问题，包括Chrome浏览器对大文件blob下载的限制，如何切换到arraybuffer以提高兼容性，JSZip的异步使用，ElementUI/Antd组件注册顺序，浏览器stream处理，Vue和Vuex版本对应，以及HTTP到HTTPS的设置和处理Word文档的敏感词检测。

摘要由CSDN通过智能技术生成

1、下载2M以上的pdf

关于chrome浏览器不同版本对blob形式的下载限制大小，因为以前我们请求接口的时候，获取流的类型参数responseType都是传的blob，偏偏chrome就限制blob类型的文件流下载，最近在项目调试过程中才发现流的类型还是可以是其他，比如arraybuffer；以前一直都是默认就是blob，没想到就是因为blob太高级了，反而被限制，所以尝试使用arraybuffer这种标准的、通用的反而能更兼容：

axois({
    url: '/getFileStream',
    method: 'post',
    responseType: 'arraybuffer',
    data: {}
}).then((buffer) => {
    var blob = new Blob([buffer.data])
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = fileObj.fileName;
    document.body.appendChild(a);
    a.click();
})

2、jszip异步生成文件时generateAsync不执行

改用3.2.0版本

3、ElementUI、Antd使用

注册先后顺序会覆盖

4、浏览器默认不加载stream，会报错

安装stream-browserify，并在vue.config中配置加载stream

    resolve: {
      extensions: [".js", ".json", ".vue"],
      alias: {
        "@": path.resolve(__dirname, "src/"),
        crypto: false
      },
      fallback: {
        stream: require.resolve('stream-browserify'),
      },
    },

5、js文件加载await

module.exports = {
    configureWebpack: {
        experiments:{
          topLevelAwait: true,
        }
    }
}

6、vue 、vuex版本对应

vue2中，要用vuex的3版本

vue3中，要用vuex的4版本

7、浏览器访问http 默认跳转至https

打开浏览器设置，修改 "不安全的内容" 的权限

8、页面预览docx（docx-preview@0.1.14）

用require引入

let docx = require("docx-preview");

//选择要渲染的元素
let childRef = document.getElementsByClassName("childRef");
//用docx-preview渲染
await docx.renderAsync(this.files, childRef[0]);

9、解析word，或需要修改导出文件内容（敏感词检测）

建议使用 jszip（3.6.0），可以结合 file-saver使用

import saveAs from "file-saver";
import JSZip from "jszip";
const jszip = new JSZip();

// 解析word文档
const zip = await jszip.loadAsync(this.files);

for (let key in zip.files) {
    if (!/word\/document.xml/.test(key)) continue;
    const fileContent = await zip.file(key).async("string");    
    const fileContentDocument = await new DOMParser().parseFromString(fileContent, "text/xml");

    const wpList = fileContentDocument.getElementsByTagName("w:p");

    // 处理完数据后重新存进zip对象
    const xmlObject = new XMLSerializer().serializeToString(fileContentDocument);
    const blob = new Blob([xmlObject], { type: "text/xml;charset=utf-8" });
    zip.file(key, blob)
}

let fileBlob = await jszip.generateAsync({ type: "blob", compression: "DEFLATE" });
saveAs(fileBlob, "检测结果.docx");