2024年Web前端最全vue 预览 word_vue预览word(2)，2024年最新2024年春招Web前端面试题

本文链接：https://blog.csdn.net/2401_84617356/article/details/138694372

TCP协议

TCP 和 UDP 的区别？
TCP 三次握手的过程？
为什么是三次而不是两次、四次？
三次握手过程中可以携带数据么？
说说 TCP 四次挥手的过程
为什么是四次挥手而不是三次？
半连接队列和 SYN Flood 攻击的关系
如何应对 SYN Flood 攻击？
介绍一下 TCP 报文头部的字段
TCP 快速打开的原理(TFO)
说说TCP报文中时间戳的作用？
TCP 的超时重传时间是如何计算的？
TCP 的流量控制
TCP 的拥塞控制
说说 Nagle 算法和延迟确认？
如何理解 TCP 的 keep-alive？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

浏览器缓存?
说一说浏览器的本地存储？各自优劣如何？
说一说从输入URL到页面呈现发生了什么？
谈谈你对重绘和回流的理解
XSS攻击
CSRF攻击
HTTPS为什么让数据传输更安全？
实现事件的防抖和节流？
实现图片懒加载？

最近做的项目要求实现预览word, pdf，png等文件功能，pdf以及png都很简单，轻松百度搞定，但是word预览研究了好久，所以特此记录分享。

前端实现预览word分为两种，一种是上传前预览（也就是前端使用input或者组件等选择文件后直接预览，此时还没有上传给后端，我定义为纯前端预览），一种是上传后预览（就是文档已经上传到后端，通过后端给的文件流实现预览）

一、先说第一种的实现方式:

首先下载安装docx-preview，引入

npm install xlsx docx-preview --save

import { defaultOptions, renderAsync } from "docx-preview";

var docxx = require("docx-preview");

我这里使用的是element ui 上传组件

 <el-upload
      class="upload-demo"
      action=""
      :http-request="myUpload"
      :show-file-list="false"
      >
      <span class = "uploadEnclosure">上传附件</span>
    </el-upload>

选择文件以后

myUpload(content){
      console.log(content);
      const downUrl = URL.createObjectURL(content.file)
      const a = document.createElement('a');
      this.$refs.selectFileNameBox.innerHTML = "";
      this.$refs.selectFileNameBox.append(a);
      a.innerHTML = content.file.name;
      a.href = downUrl
      a.download = content.file.name;
      a.target = '_blank';
      const addTypeArray = content.file.name.split(".");
      const addType = addTypeArray[addTypeArray.length - 1];
      console.log(addType);
      
      this.uploadFileName = content.file.name;
      this.uploadFileObj = content.file;
      if (addType === "pdf") {
        const url = URL.createObjectURL(content.file);
        console.log(url);
        this.xzbjPreviewIframeSrc = url;
        this.xzbjIframeIsShow = true;
        this.xzbjDialogPreviewDiv = false;
        this.xzbjPreviewImgUrl = "";
        this.xzbjDocPreviewFlag = false;
       
        this.previewBoxStyle = "height:400px;position: relative;overflow:hidden;"
        
      }
      else if(addType === "doc" || addType === "docx" || addType === "word"){
        console.log("word文件预览")
        this.xzbjPreviewImgUrl = "";
        this.xzbjPreviewIframeSrc = "";
        this.xzbjDialogPreviewDiv = false;
        this.xzbjDocPreviewFlag = true;
        this.xzbjIframeIsShow = false;

        // 将file转为buffer
        let fr = new FileReader();
        fr.readAsArrayBuffer(content.file);
        fr.addEventListener("loadend",(e) => {
            console.log("loadend---->", e)
            let buffer = e.target.result;
            this.docxRender(buffer);
        },false);
       

        
       
      }
      //".rar, .zip, .doc, .docx, .xls, .txt, .pdf, .jpg,  .png, .jpeg,"
      else if (["png", "jpg", "jpeg","bmp"].includes(addType)) {
        this.xzbjPreviewIframeSrc = "";
        this.xzbjIframeIsShow = false;
        this.xzbjDocPreviewFlag = false;
        this.imgPreview(content.file);
        
        this.previewBoxStyle = "height:400px;position: relative;overflow:auto;"
        
      } else if (addType === "rar" || addType === "zip" || addType === "7z") {
        this.filePreviewInfo = "请下载附件进行查看"
        this.xzbjPreviewImgUrl = "";
        this.xzbjPreviewIframeSrc = "";
        this.xzbjDocPreviewFlag = false;
        this.xzbjDialogPreviewDiv = true;
        this.$message({
          message: "该文件类型暂不支持预览",
          type: "warning",
        });
        return false;
      }else{
        this.filePreviewInfo = "该文件类型暂不支持预览"
        this.xzbjPreviewIframeSrc = "";
        this.xzbjIframeIsShow = false;
        this.xzbjDialogPreviewDiv = true;
        this.xzbjPreviewImgUrl = "";
        this.xzbjDocPreviewFlag = false;
        this.$message({
          message: "请仅允许上传后缀为pdf、doc、docx、word、jpg、png、bmp、rar、zip、7z的附件",
          type: "warning",
        });
      }
    }

// 渲染docx
    docxRender(buffer) {
      let bodyContainer = document.getElementById("demoDocContainer");
      renderAsync(
          buffer, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
          bodyContainer, // HTMLElement 渲染文档内容的元素,
          null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 bodyContainer。
          this.docxOptions // 配置
      ).then(res => {
          console.log("res---->", res)
      })
    },

下面是图片预览核心代码

 imgPreview(file) {
      // 看支持不支持FileReader
      if (!file || !window.FileReader) return;
      // console.log(/^image/.test(file.type), "---/^image/.test(file.type)")
      if (/^image/.test(file.type)) {
        // 创建一个reader
        let reader = new FileReader();
        // 将图片将转成 base64 格式
        reader.readAsDataURL(file);
        // 读取成功后的回调
        reader.onload = ({ target }) => {
          this.xzbjDialogPreviewDiv = false;
          this.xzbjPreviewImgUrl = target.result; //将img转化为二进制数据
          // console.log("target:", target);

        };
      }
    },

这样就实现了纯前端预览word功能

二、接下来实现配合后端预览word

根据后端返回的流预览word

request({
    method: "get",
    url: "/notice/noticeFileView",
    responseType: 'blob',
    params:{


**TCP协议**

- TCP 和 UDP 的区别？
- TCP 三次握手的过程？
- 为什么是三次而不是两次、四次？
- 三次握手过程中可以携带数据么？
- 说说 TCP 四次挥手的过程
- 为什么是四次挥手而不是三次？
- 半连接队列和 SYN Flood 攻击的关系
- 如何应对 SYN Flood 攻击？
- 介绍一下 TCP 报文头部的字段
- TCP 快速打开的原理(TFO)
- 说说TCP报文中时间戳的作用？
- TCP 的超时重传时间是如何计算的？
- TCP 的流量控制
- TCP 的拥塞控制
- 说说 Nagle 算法和延迟确认？
- 如何理解 TCP 的 keep-alive？

![](https://img-blog.csdnimg.cn/img_convert/66b931d49914135cdad991a456f3f0f3.webp?x-oss-process=image/format,png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

#### 浏览器篇

- 浏览器缓存?
- 说一说浏览器的本地存储？各自优劣如何？
- 说一说从输入URL到页面呈现发生了什么？
- 谈谈你对重绘和回流的理解
- XSS攻击
- CSRF攻击
- HTTPS为什么让数据传输更安全？
- 实现事件的防抖和节流？
- 实现图片懒加载？

![](https://img-blog.csdnimg.cn/img_convert/7bbe52b78a9b07bd4f815657f9b7f81e.webp?x-oss-process=image/format,png)



)]

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

#### 浏览器篇

- 浏览器缓存?
- 说一说浏览器的本地存储？各自优劣如何？
- 说一说从输入URL到页面呈现发生了什么？
- 谈谈你对重绘和回流的理解
- XSS攻击
- CSRF攻击
- HTTPS为什么让数据传输更安全？
- 实现事件的防抖和节流？
- 实现图片懒加载？

[外链图片转存中...(img-5y9VUi5T-1715378104867)]