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

本文首发：《如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表》

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

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

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

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

第 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 官网 下载最新的稳定版，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>

在组件