vue项目中使用vue-pdf或pdf.Js,实现在页面上预览pdf内容

一。vue-pdf

1. 安装vue-pdf

javascript 复制代码
npm   install --save  vue-pdf

2.页面引入 js部分

javascript 复制代码
import pdf from "vue-pdf";
 
data(){
 return {
 	pdfUrl: "",
    pageTotal: 0,
 }
}

mounted(){
  this.pdfUrl = pdf.createLoadingTask(pdf文件路径url);
 // 获取页码
 this.pdfUrl.promise .then((pdf) => (this.pageTotal = pdf.numPages))
  .catch((error) => {});
}

3.html部分

javascript 复制代码
<pdf
  v-for="item in pageTotal"
        :src="pdfUrl"
        :key="item"
        :page="item"
    >
    </pdf>

二、pdfJs

需要下载PDF.js库。您可以从官方GitHub仓库(https://github.com/mozilla/pdf.js)下载最新版本的PDF.js。

1.引入

Vue项目中找到public/index.html文件,并在文件的标签内添加以下代码以引入PDF.js库

javascript 复制代码
<script src="./pdfjs/build/pdf.js"></script>

2.Vue 组件中使用元素展示 PDF 页面

javascript 复制代码
<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>

3.使用 PDF.js 提供的 API 加载和渲染 PDF 文件

javascript 复制代码
mounted() {
    this.loadPDF();
  },
  methods: {
    async loadPDF() {
      const pdfUrl = 'path/to/your/pdf/file.pdf'; // 替换为您的PDF文件路径
      
      const loadingTask = window.PDFJS.getDocument(pdfUrl);
      const pdf = await loadingTask.promise;
      
      const canvas = this.$refs.pdfCanvas;
      const context = canvas.getContext('2d');
      
      const page = await pdf.getPage(1); // 加载第一页
      const viewport = page.getViewport({ scale: 1 });
      
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      
      await page.render(renderContext);
    }
  }

4.页面切换和缩放

javascript 复制代码
<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
    <button @click="previousPage">Previous Page</button>
    <button @click="nextPage">Next Page</button>
  </div>
</template>

5.页面切换和缩放功JavaScript部分

javascript 复制代码
data() {
    return {
      pdf: null,
      currentPage: 1
    };
  },
  mounted() {
    this.loadPDF();
  },
  methods: {
    async loadPDF() {
      // ...
    },
    async previousPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        await this.renderPage(this.currentPage);
      }
    },
    async nextPage() {
      if (this.currentPage < this.pdf.numPages) {
        this.currentPage++;
        await this.renderPage(this.currentPage);
      }
    },
    async renderPage(pageNumber) {
      const page = await this.pdf.getPage(pageNumber);
      const viewport = page.getViewport({ scale: 1 });
      
      const canvas = this.$refs.pdfCanvas;
      const context = canvas.getContext('2d');
      
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      
      await page.render(renderContext);
    }
  }
相关推荐
LinXunFeng1 分钟前
Flutter - Melos Pub workspaces 实践
前端·flutter·架构
艾小码4 分钟前
前端人必看!3个技巧让你彻底搞懂JS条件判断与循环
前端·javascript
灵感__idea8 小时前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
向葭奔赴♡8 小时前
CSS是什么?—— 网页的“化妆师”
前端·css
黑犬mo8 小时前
在Edge、Chrome浏览器上安装uBlock Origin插件
前端·edge
excel8 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
_小许_8 小时前
Go语言实现HTML转PDF
golang·pdf·html
大前端helloworld8 小时前
前端梳理体系从常问问题去完善-网络篇
前端·面试
excel8 小时前
🌿 一文看懂 Vue 3 的 watch 源码:从原理到流程
前端
繁依Fanyi9 小时前
让工具说话:我在 Inspira Board 里用 AI 把“能用、好用、可复用”落成了日常
前端