Vue PDF文件预览vue-pdf

原创于 2020-06-08 14:31:45 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

前端vue技术点干货分享专栏收录该内容

77 篇文章 ¥99.90 ¥299.90

订阅专栏

本文介绍了如何在Vue项目中实现PDF文件预览，通过下载并引入vue-pdf依赖，配合HTML和JavaScript代码，展示了一个简单的PDF预览效果。

第一步下载依赖包

npm install --save vue-pdf

第二步

npm install --dev worker-loader

效果图：

代码：

html:

<template>
  <div class="pdf">
    <p class="arrow">
      <!-- // 上一页 -->
      <span
        @click="changePdfPage(0)"
        class="turn"
        :class="{ grey: currentPage == 1 }"
        >上一页</span
      >
      {
  
  { currentPage }} / {
  
  { pageCount }}
      <!-- // 下一页 -->
      <span
        @click="changePdfPage(1)"
        class="turn"
        :class="{ grey: currentPage == pageCount }"
        >下一页</

了解本专栏