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

3 years ago

source link: https://studygolang.com/articles/35515
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

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

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

kalacloud-vue-pdf-view

如果你正在搭建后台管理工具，又不想处理前端问题，推荐使用卡拉云，卡拉云是新一代低代码开发工具，可一键接入常见数据库及 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>

Recommend