# 前言

在开发过程中要求对 PDF 类型的发票提供 预览 和 下载 功能， PDF 类型文件的来源又包括 H5 移动端 和 PC 端 ，而针对这两个不同端的处理会有些许不同，下文会有所提及。

针对 PDF 预览 的文章不在少数，但似乎都没有提及可能遇到的问题，或是提供对应的具体需求场景下如何选择，因此，本文的核心就是结合实际需求场景下，看看目前各种实现方案到底哪一个更适合，当然希望大家可以在评论区对文中的内容进行斧正，或是提供更优质的方案。

基本要求：

• 支持 pdf 文件 内容的 完整预览
• 多页 pdf 文件 支持 分页查看
• PC 端 和 移动端 都需支持 下载 和 预览

产品要求：

• PC 端 的预览要支持在 当前页 进行预览
• pdf 文件 预览时的字体要 和 实际文件的 字体保证一致性

不辜负每一个阅读的人。

反思一下现实中，你有没有发现这样的现象：

• 当你想认认真真做点正事的时候，总会有各种因素干扰你。

• 学习没一会，你心痒难耐想打两把游戏，然后一打就是两小时；

• 工作刚开展，你又忍不住点开某短视频，然后一刷就是老半天。

其实这些 **“奶头乐” 的背后，都是 “多巴胺陷阱”**。

本文主体部分 翻译 + 搬运 自外网著名技术博客网站 medium.com 的一篇点赞数 2.7k 的文章 (文章链接在结尾处）

# 什么是 JavaScript 模块

JavaScript 模块指的是一段可复用的，独立的代码。他们通常都有特定的功能，能在整个代码系统里被引进或删除 —— 这个概念多少类似于 Java 或者 Python 中的类。

模块通常是独立的 —— 与其他代码解耦，因此方便修改。这也提高了代码的可读性和可维护性。模块化在使部分代码保持私有，仅暴露公共部分的的同时，还解决了命名空间模糊性的问题。

# requestAnimationFrame 官方介绍

# requestAnimationFrame 用处概述

window.requestAnimationFrame() 告诉浏览器 —— 你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行...

官方文档对应截图

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

# 问题描述

• 面试官：后端一次性返回 10万条 数据给你，你如何处理？
• 我：歪嘴一笑，`what the f**k!

# 问题考察点

看似无厘头的问题，实际上考查候选人知识的广度和深度，虽然在工作中这种情况很少遇到...

• 考察前端如何处理大量数据
• 考察候选人对于大量数据的性能优化
• 考察候选人处理问题的思考方式（关于这一点，文末会说到，大家继续阅读）
• ......

文末会提供完整代码，供大家更好的理解

# 使用 express 创建一个十万条数据的接口

若是道友对 express 相关不太熟悉的话，有空可以看看笔者的这一篇全栈文章（还有完整代码哦）：

水冗水孚：Vue+Express+Mysql 全栈项目之增删改查、分页排序导出表格功能 8 赞同・4 评论文章

route.get("/bigData", (req, res) => {

  res.header('Access-Control-Allow-Origin', '*'); // 允许跨域

  let arr = [] // 定义数组，存放十万条数据

  for (let i = 0; i < 100000; i++) { // 循环添加十万条数据

    arr.push({

      id: i + 1,

      name: '名字' + (i + 1),

      value: i + 1,

    })

  }

  res.send({ code: 0, msg: '成功', data: arr }) // 将十万条数据返回之

})

# 点击按钮，发请求，获取数据，渲染到表格上

html 结构如下：

<el-button :loading="loading" @click="plan">点击请求加载</el-button>

<el-table :data="arr">

  <el-table-column type="index" label="序" />

  <el-table-column prop="id" label="ID" />

  <el-table-column prop="name" label="名字" />

  <el-table-column prop="value" label="对应值" />

</el-table>

data() {

    return {

      arr: [],

      loading: false,

    };

},

async plan() {

    // 发请求，拿数据，赋值给 arr

}

# 看似无处不在的 OOP

OOP 即 面向对象编程 （Object Oriented Programming）毫无疑问是软件设计和发展中的一大进步。事实上，一些编程语言如 Java 、C++ 就是基于 OOP 的核心概念 class 开发出来。

在高校的 CS 相关专业中，无论教授什么编程语言，OOP 的学习是绝对不会被落下的。

同时，OOP 在业界中也的确被大量使用，尤其是的后端服务领域、桌面软件、移动 APP 开发等。

因此，OOP 看起来在软件行业无处不在，在这种有点教条主义的氛围下，很多程序员甚至以为 class 是编程固有的概念 —— 然而并不是。

OOP 只是一套帮助开发者设计和编写软件的方法论，但并不代表它能解决所有领域的问题，也不是能在所有编程语言的任何场景下都适用。我们应避免陷入这种教条主义。

# 什么是 Web Worker

15 年前，也就是 2008 年， html 第五版 html5 发布，这一版的发布，提供了不少新的好用的功能，如：

• Canvas 绘图
• 拖拽 drag
• websocket
• Geolocation
• webworker
• 等...

笔者之前说过： 一项新技术新的技术方案的提出，一定是为了解决某个问题的，或者是对某种方案的优化

那么 Web Worker 这个新技术解决了什么问题？有哪些优化价值呢？

让我们继续往下看...

# 什么是认证（Authentication）

• 通俗地讲就是验证当前用户的身份，证明 “你是你自己”（比如：你每天上下班打卡，都需要通过指纹打卡，当你的指纹和系统里录入的指纹相匹配时，就打卡成功）
• 互联网中的认证：
• 用户名密码登录
• 邮箱发送登录链接
• 手机号接收验证码
• 只要你能收到邮箱 / 验证码，就默认你是账号的主人

# 什么是授权（Authorization）

• 用户授予第三方应用访问该用户某些资源的权限
• 你在安装手机应用的时候，APP 会询问是否允许授予权限（访问相册、地理位置等权限）
• 你在访问微信小程序时，当登录时，小程序会询问是否允许授予权限（获取昵称、头像、地区、性别等个人信息）
• 实现授权的方式有： cookie 、 session 、 token 、 OAuth

# 什么是凭证（Credentials）

• 实现认证和授权的前提是需要一种媒介（证书） 来标记访问者的身份
• 在战国时期，商鞅变法，发明了照身帖。照身帖由官府发放，是一块打磨光滑细密的竹板，上面刻有持有人的头像和籍贯信息。国人必须持有，如若没有就被认为是黑户，或者间谍之类的。
• 在现实生活中，每个人都会有一张专属的居民身份证，是用于证明持有人身份的一种法定证件。通过身份证，我们可以办理手机卡 / 银行卡 / 个人贷款 / 交通出行等等，这就是认证的凭证。
• 在互联网应用中，一般网站（如掘金）会有两种模式，游客模式和登录模式。游客模式下，可以正常浏览网站上面的文章，一旦想要点赞 / 收藏 / 分享文章，就需要登录或者注册账号。当用户登录成功后，服务器会给该用户使用的浏览器颁发一个令牌（token），这个令牌用来表明你的身份，每次浏览器发送请求时会带上这个令牌，就可以使用游客模式下无法使用的功能。

前言

Vue3 已经推出很长时间了，它周边的生态也是越来越完善了。之前我们使用 Vue2 的时候，Vuex 可以说是必备的，它作为一个状态管理工具，给我们带来了极大的方便。Vue3 推出后，虽然相对于 Vue2 很多东西都变了，但是核心的东西还是没有变的，比如说状态管理、路由等等。再 Vue3 种，尤大神推荐我们使用 pinia 来实现状态管理，他也说 pinia 就是 Vuex 的新版本。

那么 pinia 究竟是何方神圣，本篇文章带大家一起学透它！