2024年Web前端最新前端实现word、excel、pdf、ppt、mp4、图片(2)，前端数据结构和算法面试题

跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。

也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。

面试准备

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

面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。

---

找了网上的实现方案，效果看起来不错，放在下面的表格里，里面有一些是可以直接通过npm在vue中引入使用。

| 文档格式 | 老的开源组件 | 替代开源组件 |

| — | — | — |

| word（docx） | mammoth | docx-preview(npm) |

| powerpoint（pptx） | pptxjs | pptxjs改造开发 |

| excel（xlsx） | sheetjs、handsontable | exceljs(npm)、handsontable(npm)(npm) |

| pdf（pdf） | pdfjs | pdfjs(npm) |

| 图片 | jquery.verySimpleImageViewer | v-viewer(npm) |

docx文件实现前端预览

---

代码实现

• 首先npm i docx-preview

• 引入renderAsync方法

• 将blob数据流传入方法中，渲染word文档

import { defaultOptions, renderAsync } from “docx-preview”;

renderAsync(buffer, document.getElementById(“container”), null,

options: {

className: string = “docx”, // 默认和文档样式类的类名/前缀

inWrapper: boolean = true, // 启用围绕文档内容渲染包装器

ignoreWidth: boolean = false, // 禁止页面渲染宽度

ignoreHeight: boolean = false, // 禁止页面渲染高度

ignoreFonts: boolean = false, // 禁止字体渲染

breakPages: boolean = true, // 在分页符上启用分页

ignoreLastRenderedPageBreak: boolean = true,//禁用lastRenderedPageBreak元素的分页

experimental: boolean = false, //启用实验性功能（制表符停止计算）

trimXmlDeclaration: boolean = true, //如果为真，xml声明将在解析之前从xml文档中删除

debug: boolean = false, // 启用额外的日志记录

}

);

实现效果

image.png

pdf实现前端预览

---

代码实现

• 首先npm i pdfjs-dist

• 设置PDFJS.GlobalWorkerOptions.workerSrc的地址

• 通过PDFJS.getDocument处理pdf数据，返回一个对象pdfDoc

• 通过pdfDoc.getPage单独获取第1页的数据

• 创建一个dom元素，设置元素的画布属性

• 通过page.render方法，将数据渲染到画布上

import * as PDFJS from “pdfjs-dist/legacy/build/pdf”;

// 设置pdf.worker.js文件的引入地址

PDFJS.GlobalWorkerOptions.workerSrc = require(“pdfjs-dist/legacy/build/pdf.worker.entry.js”);

// data是一个ArrayBuffer格式，也是一个buffer流的数据

PDFJS.getDocument(data).promise.then(pdfDoc=>{

const numPages = pdfDoc.numPages; // pdf的总页数

// 获取第1页的数据

pdfDoc.getPage(1).then(page =>{

// 设置canvas相关的属性

const canvas = document.getElementById(“the_canvas”);

const ctx = canvas.getContext(“2d”);

const dpr = window.devicePixelRatio || 1;

const bsr =

ctx.webkitBackingStorePixelRatio ||

ctx.mozBackingStorePixelRatio ||

ctx.msBackingStorePixelRatio ||

ctx.oBackingStorePixelRatio ||

ctx.backingStorePixelRatio ||

1;

const ratio = dpr / bsr;

const viewport = page.getViewport({ scale: 1 });

canvas.width = viewport.width * ratio;

canvas.height = viewport.height * ratio;

canvas.style.width = viewport.width + “px”;

canvas.style.height = viewport.height + “px”;

ctx.setTransform(ratio, 0, 0, ratio, 0, 0);

const renderContext = {

canvasContext: ctx,

viewport: viewport,

};

// 数据渲染到canvas画布上

page.render(renderContext);

})

})

实现效果

image.png

还可以看看：Webview加载pdf遇到的一些坑及解决方法

excel实现前端预览

---

代码实现

• 下载exceljs、handsontable的库

• 通过exceljs读取到文件的数据

• 通过workbook.getWorksheet方法获取到每一个工作表的数据，将数据处理成一个二维数组的数据

• 引入@handsontable/vue的组件HotTable

• 通过settings属性，将一些配置参数和二维数组数据传入组件，渲染成excel样式，实现预览

// 加载excel的数据

（new ExcelJS.Workbook().xlsx.load(buffer)).then(workbook=>{

// 获取excel的第一页的数据

const ws = workbook.getWorksheet(1);

// 获取每一行的数据

const data = ws.getRows(1, ws.actualRowCount);

})

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

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

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。