本文首发：《[如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表](https://kalacloud.com/blog/how-build-vuejs-pdf-viewer-pdfjs/)》
很多 Vue 项目中都需要 PDF 文件预览功能，比如合同 ERP，销售CRM，内部文档CMS管理系统，内置 PDF 文件在线预览功能。本文手把手教你搭建一套 PDF 预览组件嵌入到 Vue 项目中，实现 PDF 文件在线预览等 PDF 预览的所有常见功能。
跟随本教程学习完成后，你会搭出以下 PDF 在线预览效果的 Vue PDF 预览组件
如果你正在搭建后台管理工具，又不想处理前端问题，推荐使用[卡拉云](https://kalacloud.com/)，卡拉云是新一代低代码开发工具，可一键接入常见数据库及 API ，无需懂前端，仅需拖拽即可快速搭建属于你自己的后台管理工具，一周工作量缩减至一天，详见本文文末。
扩展阅读《[12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐](https://kalacloud.com/blog/best-vue-ui-component-libraries/)》
## 第 2 步 - 下载并配置 PDF.js
```
npm install -g @vue/cli
vue create kalacloud-vue-pdfjs-viewer
cd kalacloud-vue-pdfjs-viewer
```
接下来，我们所有操作都在 `kalacloud-vue-pdfjs-viewer` 这个目录中完成。
## 第 2 步 - 下载并配置 PDF.js
配置好 Vue 项目后，我们先去 [PDF.js 官网](https://mozilla.github.io/pdf.js/getting_started/) 下载最新的稳定版，PDF.js 是目前 PDF 在线预览中最好的开源解决方案之一。我们把下载好的压缩包解压到 Vue 项目中的新建文件夹 `public/lib` 中。
然后在找一个 pdf 文件放在文件夹的 `web` 文件夹中，一会我们用写的 pdf 预览组件来调用并预览这个 PDF 文件。
PDF.js 解压后放在 `public/lib` 的目录结构
```
public
├── lib
| ├── build
| ├── ...
| ├── web
| ├── my-pdf-file.pdf
| ├── ...
| ├── LICENSE
├── favicon.ico
└── index.html
```
扩展阅读《[vue.draggable 入门指南 - 手把手教你开发任务看板](https://kalacloud.com/blog/vue-draggable-tutorial/)》
## 第 3 步 - 创建 Vue PDF 预览组件
接着，我们来创建 Vue PDF 预览组件 - `PDFJSViewer.vue` 。我们把它放在 Vue 组件文件夹中。
在 `src/components` 文件夹中，新建 `PDFJSViewer.vue` 文件，并把以下代码复制进去。
文件位置：`src/components/PDFJSViewer.vue`
```
<template>
<div>
<iframe height="100%" width=100% :src="`${getFilePath}`" ></iframe>
</div>
</template>
<script>
export default {
name: 'PDFJSViewer',
props: {
fileName: String,
path:String
},
computed:{
getFilePath: function () {
if(this.fileName!==''){
return this.path +'?file=' + this.fileName
}
return this.path
}
}
}
</script>
<style scoped>
div {
width: 50%;
height: 79vh;
min-width: 400px;
}
</style>
```
在组件 `<template>` 之中，绑定数据并将 DOM 渲染到 Vue 项目中。在 `<script>` 之中，我们声明了 PDFJSViewer 为 Vue 项目组件，然后写上需要加载的 PDF 文件位置。
扩展阅读《[最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐](https://kalacloud.com/blog/best-vue-date-timepicker-components/)》
## 第 4 步 - 导入 Vue PDF 预览组件
这一步，我们导入 PDF 预览组件，并在 Vue 项目中调用并显示出来。
在 `src/App.vue` 中，我们先把刚刚写的 PDFJSViewer 组件添加到 `<template>` 部分，以及把我们要加载预览的 PDF 位置和文件名写进去。
```
<template>
<div id="app">
<h1>Vue 实现 PDF 文件在线预览 - 卡拉云(kalacloud.com)</h1>
<PDFJSViewer :path="`${path}`" :fileName="`${name}`"/>
</div>
</template>
```
然后在 `<script>` 部分导入 PDF 预览组件。：
```
<script>
import PDFJSViewer from './components/PDFJSViewer'
export default {
name: 'app',
components: {
PDFJSViewer
},
data () {
return {
name: 'kalacloud-demo.pdf', // 这里是需要预览的 PDF 文件名
path: 'lib/web/viewer.html'
}
}
}
</script>
```
现在运行 Vue 项目，应该已经能看到 PDF 预览效果了。
扩展阅读《[最棒的 7 个 Laravel admin 后台管理系统推荐](https://kalacloud.com/blog/best-laravel-admin-panels/)》
## 第 5 步 - 自定义 PDF.js 工具栏
这一步是自定义 PDF.jd 预览组件中顶部的工具条，你可以移动工具条中按钮的位置，给他们换 icon，也可以隐藏某些你不想让用户使用的功能。
在 `public/lib/web/viewer.html` 文件的 `<head>` 部分，添加以下代码：
文件位置：`public/lib/web/viewer.html`
```
<script src="customToolbar.js"></script>
```
接下来，我们在`public/lib/web` 中新建一个 js 文件 `customToolbar.js`，并添加以下代码：
文件位置：`public/lib/web/customToolbar.js`
```
//创建一个新样式
let sheet = (function() {
let style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
return style.sheet;
})();
//调整页面大小时，PDF 预览组件会隐藏，打开就会彻底隐藏所有功能变成一个纯预览工具。
//function editToolBar(){
//removeGrowRules();
//将功能按钮放在工具栏左侧
addElemFromSecondaryToPrimary('pageRotateCcw', 'toolbarViewerLeft')
addElemFromSecondaryToPrimary('pageRotateCw', 'toolbarViewerLeft')
addElemFromSecondaryToPrimary('zoomIn', 'toolbarViewerLeft')
addElemFromSecondaryToPrimary('zoomOut', 'toolbarViewerLeft')
//将功能按钮放在工具栏中间
addElemFromSecondaryToPrimary('previous', 'toolbarViewerMiddle')
addElemFromSecondaryToPrimary('pageNumber', 'toolbarViewerMiddle')
addElemFromSecondaryToPrimary('numPages', 'toolbarViewerMiddle')
addElemFromSecondaryToPrimary('next', 'toolbarViewerMiddle')
//将功能按钮放在工具栏右侧
addElemFromSecondaryToPrimary('secondaryOpenFile', 'toolbarViewerRight')
// 更改功能按钮的图标
changeIcon('previous', 'icons/baseline-navigate_before-24px.svg')
changeIcon('next', 'icons/baseline-navigate_next-24px.svg')
changeIcon('pageRotateCcw', 'icons/baseline-rotate_left-24px.svg')
changeIcon('pageRotateCw', 'icons/baseline-rotate_right-24px.svg')
changeIcon('viewFind', 'icons/baseline-search-24px.svg');
changeIcon('zoomOut', 'icons/baseline-zoom_out-24px.svg')
changeIcon('zoomIn', 'icons/baseline-zoom_in-24px.svg')
changeIcon('sidebarToggle', 'icons/baseline-toc-24px.svg')
changeIcon('secondaryOpenFile', './icons/baseline-open_in_browser-24px.svg')
// 隐藏某些功能
removeElement('secondaryToolbarToggle')
removeElement('scaleSelectContainer')
removeElement('presentationMode')
removeElement('openFile')
removeElement('print')
removeElement('download')
removeElement('viewBookmark')
}
function changeIcon(elemID, iconUrl){
let element = document.getElementById(elemID);
let classNames = element.className;
classNames = elemID.includes('Toggle')? 'toolbarButton#'+elemID :
classNames.split(' ').join('.');
classNames = elemID.includes('view')? '#'+elemID+'.toolbarButton' : '.'+classNames
classNames+= "::before";
addCSSRule(sheet, classNames, `content: url(${iconUrl}) !important`, 0)
}
function addElemFromSecondaryToPrimary(elemID, parentID){
let element = document.getElementById(elemID);
let parent = document.getElementById(parentID);
element.style.minWidth = "0px";
element.innerHTML =''
parent.append(element);
}
function removeElement(elemID){
let element = document.getElementById(elemID);
element.parentNode.removeChild(element);
}
function removeGrowRules(){
addCSSRule(sheet, '.hiddenSmallView *', 'display:block !important');
addCSSRule(sheet, '.hiddenMediumView', 'display:block !important');
addCSSRule(sheet, '.hiddenLargeView', 'display:block !important');
addCSSRule(sheet, '.visibleSmallView', 'display:block !important');
addCSSRule(sheet, '.visibleMediumView', 'display:block !important');
addCSSRule(sheet, '.visibleLargeView', 'display:block !important');
}
function addCSSRule(sheet, selector, rules, index) {
if("insertRule" in sheet) {
sheet.insertRule(selector + "{" + rules + "}", index);
}
else if("addRule" in sheet) {
sheet.addRule(selector, rules, index);
}
}
window.onload = editToolBar
```
到这里，我们已经完全配置好了 PDF 预览组件，运行 Vue 项目，你会看到以下效果：
## 总结
本文介绍了如何在 Vue 中实现 PDF 预览功能。如果不想处理前端问题，推荐使用[卡拉云](https://kalacloud.com/)，卡拉云内置各类组件，无需懂任何前端，仅需拖拽即可快速生成。
下图为使用卡拉云搭建的内部广告投放监测系统，仅需拖拽，1小时搞定。
卡拉云是新一代低代码开发工具，免安装部署，可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。**原来三天的开发工作量，使用卡拉云后可缩减至 1 小时，欢迎免费[试用卡拉云](https://kalacloud.com/)。**
扩展阅读：
- [最好的 5 款翻译 API 接口对比测评](https://kalacloud.com/blog/best-translation-api/)
- [最好用的七大顶级 API 接口测试工具](https://kalacloud.com/blog/api-testing-tools/)
- [最好用的 5 款 React 富文本编辑器](https://kalacloud.com/blog/top-5-rich-text-editors-for-react/)
- [Postman 使用教程 - 手把手教你 API 接口测试](https://kalacloud.com/blog/postman-tutorial/)
- [最好的 6 个免费天气 API 接口对比测评](https://kalacloud.com/blog/free-weather-api/)
- [如何在 Vue 中导出数据至 Excel 表格](https://kalacloud.com/blog/vue-export-json-to-excel-csv/)
有疑问加站长微信联系（非本文作者））
