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);
    }
  }
相关推荐
持梦远方2 分钟前
重生之我拿捏Linux——《三、shell脚本使用》
前端·chrome
行走在顶尖10 分钟前
代码截断运行逻辑
前端
武天17 分钟前
说说你对slot的理解?slot使用场景有哪些?
vue.js
一枚前端小能手17 分钟前
「周更第8期」实用JS库推荐:decimal.j
前端·javascript
草莓熊Lotso18 分钟前
《C++ Web 自动化测试实战:常用函数全解析与场景化应用指南》
前端·c++·python·dubbo
武天21 分钟前
vue中,key的原理
vue.js
武天25 分钟前
如何打破scope对样式隔离的限制?
vue.js
武天26 分钟前
Vue中的$nextTick有什么作用?
vue.js
Tech_Lin27 分钟前
JavaScript Date时间对象的常用操作方法总结
前端·javascript
武天27 分钟前
刷新浏览器后,Vuex的数据是否存在?如何解决?
vue.js