Vue 实现 PDF 文件在线预览 - 手把手教你写 Vue PDF 预览功能

A kitten
蒋川
B 端数据开发,卡拉云联合创始人
最近更新 2022年05月29日

如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表

很多 Vue 项目中都需要 PDF 文件预览功能,比如合同 ERP,销售CRM,内部文档CMS管理系统,内置 PDF 文件在线预览功能。本文手把手教你搭建一套 PDF 预览组件嵌入到 Vue 项目中,实现 PDF 文件在线预览等 PDF 预览的所有常见功能。

跟随本教程学习完成后,你会搭出以下 PDF 在线预览效果的 Vue PDF 预览组件

kalacloud-vue-pdf-view

如果你正在搭建后台管理工具,又不想处理前端问题,推荐使用卡拉云,卡拉云是新一代低代码开发工具,可一键接入常见数据库及 API ,无需懂前端,仅需拖拽即可快速搭建属于你自己的后台管理工具,一周工作量缩减至一天,详见本文文末。

PDF预览调试起来太费劲?

试试卡拉云,无需处理任何前端问题,仅需拖拽,即可生成后台工具,数天工作量降至 1 小时。

第 1 步 - 安装 Vue CLI 并创建项目

npm install -g @vue/cli
vue create kalacloud-vue-pdfjs-viewer
cd kalacloud-vue-pdfjs-viewer

接下来,我们所有操作都在 kalacloud-vue-pdfjs-viewer 这个目录中完成。

扩展阅读《12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐

第 2 步 - 下载并配置 PDF.js

配置好 Vue 项目后,我们先去 PDF.js 官网 下载最新的稳定版,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 入门指南 - 手把手教你开发任务看板

第 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 时间日期选择器测评推荐

第 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 后台管理系统推荐

第 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 项目,你会看到以下效果:

kalacloud-vue-pdf-view

扩展阅读《最好用的 7 个 Vue Tree select 树形组件

总结

本文介绍了如何在 Vue 中实现 PDF 预览功能。如果不想处理前端问题,推荐使用卡拉云,卡拉云内置各类组件,无需懂任何前端,仅需拖拽即可快速生成。

下图为使用卡拉云搭建的内部广告投放监测系统,仅需拖拽,1小时搞定。

kalacloud

再看个卡拉云的 Demo 案例,下面是用卡拉云搭建的数据库 CURD 后台管理系统,只需拖拽组件,即可在10分钟内完成搭建。

可直接分享给同事一起使用:https://my.kalacloud.com/apps/8z9z3yf9fy/published

卡拉云是新一代低代码开发平台,与 React 这类框架相比,卡拉云无需配置开发环境,直接注册即可开始搭建。开发者无需处理任何前端问题,简单拖拽即可生成图表、表格、表单、富文本等功能组件,一键接入数据库及 API,快速完成企业内部工具搭建,还可以分享给团队成员共享使用,数周的开发时间,缩短至 1 小时。

扩展阅读: