个人技术分享

视频链接：

46-3在线浏览PDF_哔哩哔哩_bilibili

链接：

常见文件的在线预览 (qq.com)

本文转载于B站大佬：王清江哊，仅用于学习和讨论，感谢大佬的分享 ^_^：

第一步：安装和依赖：

npm install vue-pdf

第二步：写两个Vue文件

<template>
  <div>
    <div class="tools">
      <el-button :theme="'default'" type="submit" :title="'上一页'" @click.stop="prePage" class="mr10"> 上一页</el-button>
      <el-button :theme="'default'" type="submit" :title="'下一页'" @click.stop="nextPage" class="mr10"> 下一页</el-button>
      <div class="page">{{ pageNum }}/{{ pageTotalNum }}</div>
      <el-button :theme="'default'" type="submit" :title="'顺时针旋转'" @click.stop="clock" class="mr10"> 顺时针旋转</el-button>
      <el-button :theme="'default'" type="submit" :title="'逆时针旋转'" @click.stop="counterClock" class="mr10"> 逆时针旋转
      </el-button>
      <el-button :theme="'default'" type="submit" :title="'打印'" @click.stop ="pdfPrintAll" class="mr10"> 打印</el-button>
    </div>
    <PDF ref="pdf" :src="url" :page="pageNum" :rotate="pageRotate" @progress="loadedRatio = $event"
         @page-loaded="pageLoaded($event)"
         @num-pages="pageTotalNum=$event" @error="pdfError($event)" @link-clicked="page = $event">
    </PDF>
  </div>
</template>

<script>
import PDF from 'vue-pdf'

export default {
  name: "testPPT",
  components: {
    PDF
  },
  data() {
    return {
      page: null,
      previewDialog: false,
      url: "http://wangqingjiang.top/prod-api/profile/upload/2022/09/26/%E5%B0%9A%E7%A1%85%E8%B0%B7_%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF_Vue%E5%85%A8%E5%AE%B6%E6%A1%B6_20220926214043A004.pdf",
      pageNum: 1,
      pageTotalNum: 1,
      pageRotate: 0,
      // 加载进度
      loadedRatio: 0,
      curPageNum: 0,
    }
  },
  methods: {
    /**
     * 预览PDF
     */
    previewPDF(row, index) {
      this.previewDialog = true;
      console.log("", row, index);
    },
    // 上一页函数，
    prePage() {
      console.log(this.page)
      var page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
    },
    // 下一页函数
    nextPage() {
      var page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
    },
    // 页面顺时针翻转90度。
    clock() {
      this.pageRotate += 90
    },
    // 页面逆时针翻转90度。
    counterClock() {
      this.pageRotate -= 90
    },
    // 页面加载回调函数，其中e为当前页数
    pageLoaded(e) {
      this.curPageNum = e
    },
    // 错误时回调函数。
    pdfError(error) {
      console.error(error)
    },
    // 打印全部
    pdfPrintAll() {
      /**
       * 打印界面字符乱码是因为你pdf中使用了自定义字体导致的,谷歌浏览器打印的时候预览界面真的变成了真·方块字 ,解决方案如下：
       * 用文章最后的pdfjsWrapper.js在替换掉node_modules/vue-pdf/src/pdfjsWrapper.js
       */
      console.log("打印");
      this.$refs.pdf.print()
    },
  }

}
</script>

<style scoped>

</style>

第三步：跳转路由：

 {
    path: '/testPPT',
    component: () => import('@/views/testPPT'),
    hidden: true
  },

第四步: 最终效果

你可以购买金山的服务

数据库文档预览非常简单好看的样式

做的非常漂亮 

调用金山的接口，比自己的强多了

 gitee搜索vue在线浏览word

这样搜的