vue 预览、下载pdf

最新推荐文章于 2025-03-04 10:30:54 发布

像山里的风

最新推荐文章于 2025-03-04 10:30:54 发布

阅读量3.3k

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_42905523/article/details/124474441

版权

这篇博客介绍了如何在Vue.js应用中实现PDF文件的预览和下载。首先，由于PDF文件存储在OSS上，可以使用a标签进行下载，不适合通过iframe预览。然后，博主展示了使用vue-pdf库来预览PDF文件，包括安装和应用的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.下载pdf文件

因为pdf文件是传到oss上的，地址是下载地址，所可以使用a标签下载，但不能使用iframe等方法预览

<el-button class="download" v-if="list&&list.length>0" @click="downloadFile(fileList)" type="text">下载</el-button>

downloadFile(fileList){
   
   window.location.href = fileList[0].url
   this.$message.success('下载成功！');
},

2.使用vue-pdf预览pdf文件

1.安装vue-pdf

npm install --save vue-pdf

2.使用

<template>
  <div class="pdf">
    <pdf 
      ref="pdf"
      :src="pdfUrl"
      :page="pageNum"
      :rotate="pageRotate"
      @password="password"
      @progress="loadedRatio = $event"
      @page-loaded="pageLoaded($event)"
      @num-pages="pageTotalNum=$event" 
      @error="pdfError($event)"
      @link-clicked="page = $event">
    </pdf>
    <div class="pdf-tab">
      <el-button type="text" class="btn-de

最低0.47元/天解锁文章