vue在线预览PDF

最新推荐文章于 2024-10-06 22:38:40 发布

Tmbe

最新推荐文章于 2024-10-06 22:38:40 发布

阅读量487

点赞数

文章标签： javascript vue.js html css

本文链接：https://blog.csdn.net/weixin_42346984/article/details/116232825

版权

本文介绍了如何在Vue项目中使用pdfjs-dist和axios库来实现PDF文件的在线预览功能。通过创建pdfViewer组件，并在父组件中调用，实现了显示PDF总页数和加载完成的逻辑。

摘要由CSDN通过智能技术生成

一、引入pdfjs-dist、axios包

npm i pdfjs-dist axios --save

二、pdfViewer组件

<template>
  <div
    class="pdf-viewer"
    tabIndex="1"
  >
    <!-- <div class="position page">
      <span
        class="span_1"
        @click="pageUp"
      >上一页</span>
      <span>页码：{
   {
    `${
     pageNo}/${
     totals.length}` }}</span>
      <span
        class="span_2"
        @click="pageDown"
      >下一页</span>
    </div> -->
    <div
      v-show="!copy"
      class="position info"
    >
      <!-- <div style="font-size:12px;">
        注意：此页面无法复制文本，由于部分条款较大，会导致卡顿，如需复制请到“条款标注”、“条款文本”复制，或者点击<a
          :href="`/tool/viewer?url=${encodeURIComponent(pdfUrl)}`"
          target="_blank"
        >新窗口预览</a>
      </div> -->
    </div>
    <div
      id="mainContent"
      ref="mainContent"
      class="pdf-main-content"
    >
      <div
        v-for="(item, index) in totals"
        :id="`page${id}-${item}`"
        :key="'view-'+index"
        class="pdf-box"
      >
        <div style="padding: 10px;background: #fff;">{
   {
   item}}/{
   {
   totalLength}}</div>
        <canvas
          :id="`canvas-pdf${id}-${item}`"
          class="canvas-pdf" 
        />
      </div>
    </div>
  </div>
</template>

<script>
import PDFJS from 'pdfjs-dist'
import axios from 'axios'
import 'pdfjs-dist/web/pdf_viewer.css'
const pdfjsWorker = import('pdfjs-dist/build/pdf.worker.entry');
pdfjsWorker.then(worker => {
   
  PDFJS.GlobalWorkerOptions.workerSrc = worker;
})
  
// PDFJS.workerSrc = require(pdfjs-dist/build/pdf.worker.js)
export default {
   
  name: 'PdfViewer',
  props: {
   
    pdfUrl: {
   
      type: String,
      default: ''
    },
    pdfInfo: {
   
      type: Object,
      default() {
   
        return {
   };
      }
    },
    id: {
   
      type: String,
      default: ''
    },
    copy: {
   
      type: Boolean,
      default: false
    },
    totalLength: {
   
      type: Number,
      default(){
   </