关于vue.js:如何在-Vue-中使用-Chartjs-手把手教你搭可视化数据图表

39次阅读

共计 5673 个字符，预计需要花费 15 分钟才能阅读完成。

本文首发：《如何在 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>

在组件 <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 我的项目，你会看到以下成果：

总结

本文介绍了如何在 Vue 中实现 PDF 预览性能。如果不想解决前端问题，举荐应用卡拉云，卡拉云内置各类组件，无需懂任何前端，仅需拖拽即可疾速生成。

下图为应用卡拉云搭建的外部广告投放监测零碎，仅需拖拽，1 小时搞定。

卡拉云是新一代低代码开发工具，免装置部署，可一键接入包含 MySQL 在内的常见数据库及 API。可依据本人的工作流，定制开发。无需繁琐的前端开发，只须要简略拖拽，即可疾速搭建企业外部工具。 原来三天的开发工作量，应用卡拉云后可缩减至 1 小时，欢送收费试用卡拉云。

扩大浏览：

  • 最好的 5 款翻译 API 接口比照测评
  • 最好用的七大顶级 API 接口测试工具
  • 最好用的 5 款 React 富文本编辑器
  • Postman 应用教程 – 手把手教你 API 接口测试
  • 最好的 6 个收费天气 API 接口比照测评
  • 如何在 Vue 中导出数据至 Excel 表格

正文完
vue.js
发表至： vue.js
2022-03-08
 0
关于vue.js:vue3APIwatchEffect
关于vue.js:Vue生命周期
关于vue.js:uniappvue基于InnerAudioContext封装一个基本的音频组件
关于vue.js:sharedpoollatch可以解决哪些问题