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);
    }
  }
相关推荐
RAY_CHEN.几秒前
vue3 pinia 中actions修改状态不生效
vue.js·typescript·npm
酷酷的威朗普几秒前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
前端每日三省几秒前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript
小刺猬_9851 分钟前
(超详细)数组方法 ——— splice( )
前端·javascript·typescript
契机再现2 分钟前
babel与AST
javascript·webpack·typescript
渊兮兮3 分钟前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画
鑫宝Code3 分钟前
【TS】TypeScript中的接口(Interface):对象类型的强大工具
前端·javascript·typescript
和你一起去月球4 分钟前
TypeScript - 函数(下)
javascript·git·typescript
_Legend_King9 分钟前
vue3 + elementPlus 日期时间选择器禁用未来及过去时间
javascript·vue.js·elementui
爱吃青椒不爱吃西红柿‍️10 分钟前
华为ASP与CSP是什么?
服务器·前端·数据库