整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
近新项目需要处理 PDF，研究了 PDf.js 之后觉得很不错，于是写篇文章推荐给大家。
PDF.js 的功能和它的名字一样简单，是一个使用 HTML5 技术来让前端网页支持读取、解析和显示 PDF 文档的 JS 工具库。这个项目由大名鼎鼎的 Mozilla 组织开发并且更新维护着，没错，就是那个开发了火狐浏览器的 Mozilla。所以 pdf.js 也内置在 Firefox 的 19+ 版本中，也是火狐浏览器的默认 PDF 处理工具。
一般来说，要查看 PDF 文档，我们需要一个 PDF 阅读器软件，而通过 PDF.js 可以在浏览器中直接显示和处理 PDF 文档，无论是在线浏览、存档或者其他基于 PDF 的功能都可以实现。
PDF.js 项目主页
如果只是为什么显示 PDF 文档，其实大部分情况下浏览器都支持直接打开 PDF，之前碰到要显示 PDF 的需求，都是直接在浏览器新标签打开。
在浏览器中渲染 PDF
不过就在上周，我接到了一个需求，要在网页上支持导入 PDF 文件，转化成图片保存到后端，并且还要提取 PDF 文档中的文字。于是我就开始研究 PDF.js ，了解之后发现这个工具库非常强大，完全可以满足我的需求，那些在线转换 PDF 的工具实际上都是基于 PDF.js 开发的。
我要处理的文档有一部分是发票，其实里面的文字并不是图片，而是可以选择的，这种类型的文档通过 PDF.js 甚至可以直接获取文字的内容，OCR 识别的过程都免了，实在太棒了。
要开始使用 PDF.js ，可以直接从项目下载源码，然后在页面中引入 pdf.js ，就可以按照代码例子那些来使用了。
官方文档
我是在 Vue 项目中使用，所以我选择用 npm 安装的方式：
npm i pdfjs-dist -S然后在 Vue 页面中引入 PDF.js，注意这里的引入方式，需要在包名后加上 /webpack ，否则会报错，原因我也没有去深入排查。
<template>
<div class="hello">
<input
type="file"
name="file"
id="file"
accept="application/pdf"
single
placeholder="请选择pdf文件"
@change="handleFile"
/>
<canvas id="viewer" ref="viewer" :width="width" :height="height"></canvas>
</div>
</template>
<script>
import { getDocument } from "pdfjs-dist/webpack"; // 注意这里的引入方式
// 省略无关代码...
// methods:
handleFile(e) {
const reader = new FileReader();
reader.onload = (evt) => {
this.init(evt.target.result);
};
reader.readAsDataURL(e.target.files[0]);
},
async init(path) {
// 读取pdf
let pdf = await getDocument(path).promise; //返回一个pdf对象
const page = await pdf.getPage(0); // 获取第一页
const viewport = page.getViewport({ scale: 1 });
const textContent = await page.getTextContent();
console.log(textContent.items); // 页面的文章内容在这
const context = this.canvas.getContext("2d");
// 设置canvas的尺寸
this.width = viewport.width;
this.height = viewport.height;
await page.render({ canvasContext: context, viewport: viewport }).promise; // 渲染第一页内容
},
</script>上面这段代码就是我项目 demo 中的一部分，可以实现读取 PDF 文档中的页面和文字，代码的末尾把第一页渲染到了 canvas 中，想要转成图片，只要把 canvas 中的内容转成 PNG 图片即可，区区十来行代码，非常简单。
除了提取文章和转成图片，PDF.js 还很多强大的功能，比如可以实现页面导航，预览时加入缩放、滚动、旋转和手写等注释以及实现打印、另存为等操作。
还有些付费软件的功能是压缩 PDF 文档，PDF.js 也可以压缩处理超大型的 PDF 文档，技术原理是把文档中没有使用的结构、元素和对象删除，大大简化文档，从而起到压缩的效果。
总之，想要在项目处理 PDF，PDF.js 是首选，并且目前没有看到类似好用并且强大的 JS 库，反而很多 PDF 工具都是基于 PDF.js 二次封装的。
Mozilla 组织本身是一个非营利性组织，成立以来一直致力于推动浏览器的良好发展，PDF.js 也不例外，是一个免费开源的项目，源码基于 Apache 2.0 许可托管在 Github 上，任何人都可以免费下载来使用，用在商业项目也完全没问题。
↓↓点击查看本次分享的网站。
PDF.js - 免费开源的 JavaScript 读取、显示 PDF 文档的工具库，由 Mozilla 开发并且持续维护｜那些免费的砖
HT Viewer for Ma是一款轻量级的.mht、.mhtm、.mhtml文档查看器/阅读器。可快速阅读，还支持文本缩放或者放大，支持苹果芯片，赶快试试吧。
详情尽在：https://www.macz.com/mac/8152.html?id=ODE3NDU1Jl8mMjcuMTg2LjEyNy4yNTQ%3D
件处理之前的给大家推荐过一些工具，基本上围绕在PC应用上。本篇的推荐，将文件的查看与管理扩展开来，增加了一些插件或浏览器相关文件管理神器。
一款开箱即用的终端文件管理工具，非正统的终端文件管理器，几乎不需要配置就能用。它的功能全面，运行仅需极少的内存。
它支持文件实时预览、搜索、批量操作文件、排序等功能，同时还能作为插件整合进Vim。
N3源码：github.com/jarun/nnn
这是一款Windows Explorer资源管理器扩展，为浏览器增加类似谷歌Chrome的Tab多标签页功能。支持Windows 8、Win7以及XP。
Clover提供强大的拖入拖出、窗口分组功能。它通过BHO插件的形式，集成到Windows Explorer，保留你原本的使用习惯，更适合懒人用户。
官网：cn.ejie.me
一个在线文件管理工具，可以用你的浏览器来管理文件数据。
支持在浏览器上管理FTP、SFTP、Git、S3、MySQL、Dropbox等服务中的文件和数据。功能包含编辑文件、图片管理、视频转码、Office 文档、全文搜索等。
官网：www.filestash.app
源码：github.com/mickael-kerjean/filestash
一款带有插件的Windows快速文件搜索和应用程序启动器。支持自定义的热键立即触发搜索窗口，帮助你无缝衔接工作流程。
Flow Launcher的功能包含搜索应用程序、文件、书签、YouTube、Twitter等所有内容。
你可以使用F1键打开/隐藏预览面板，媒体文件将显示为大图像，或显示大图标和整个路径。也可以通过设置（始终预览）永久打开预览。使用“Ctrl+加号，减号/Ctrl+]，[”可以快速调整搜索窗口宽度和高度。
官网：www.flowlauncher.com
源码：github.com/Flow-Launcher/Flow.Launcher
一款免费、开源、快速的文件管理器（资源管理器/查找器）应用程序，适用于Windows和Linux。
支持智能搜索、自定义主页、文件共享、文件下载、智能拖放、文件保护等功能。
源码：github.com/aleksey-hoffman/sigma-file-manager
Gogole谷歌浏览器Cookies查看软件，无需使用 Google Chrome 浏览器的标准内部cookie查看器。
它可以帮助你快速查看谷歌浏览器存储的所有cookie的显示列表，并删除不需要的内容。同时允许你通过文本/CSV/HTML/XML文件导出cookie。
对于每一个cookie，它支持显示包含主机名、路径、名称、值，安全（Yes / No）、HT TP cookie（Yes / No）、最后访问时间、创建时间、过期时间等信息。
下载：soft.3dmgame.com/down/241378.html
在不同的平台，管理不同的文件内容，查看文件信息、预览文件内容、搜索查找指定文件等，你需要的功能，全了！
*请认真填写需求信息，我们会在24小时内与您取得联系。
