devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：盐析白兔 | 2024-08-06 10:28:14

赞

踩

vue中预览word文件

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

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

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

  • 1
  • 2
  • 3

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

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

选择文件以后

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",
        });
      }
    }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
// 渲染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)
      })
    },

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

下面是图片预览核心代码

 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);

        };
      }
    },

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

这样就实现了纯前端预览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)]




  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/937002
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号