文件流使用vue-pdf预览pdf文件

原创已于 2025-03-06 09:54:43 修改 · 2.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-04-14 17:57:06 首次发布

技术实现专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何通过Node.js获取文件流并转换为Base64格式，然后在Vue应用中利用vue-pdf库实现实时预览PDF文件，包括使用CMapReaderFactory和Vant UI组件进行交互操作。

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

1.安装依赖

npm install vue-pdf --save

2.通过接口拿到文件流转换成Base64

 const res = await downloadFile({
     path: this.visitUrl
 })
 this.srcResult = await this.$utils.blobToDataURI(res)

 /**
     * 读取指定blob,返回转换为base64后的结果
     * @param blob
     * @returns {Promise<unknown>}
     */
  static blobToDataURI(blob) {
    return new Promise((resolve) => {
      let reader = new FileReader()
      reader.onload = function (e) {
        resolve(e.target.result)
      }
      reader.readAsDataURL(blob)
    })
  }

3.通过vue-pdf实现预览（我使用的是vant）

 <van-popup v-model="show" @close="close" position="bottom" :style="{ height: '80%',width: '100%' }">
      <div class="control" v-if="pageCount > 1">
        <van-button type="primary" size="small" @click="changePdfPage('up')">上一页</van-button>
        <div class="interval">{{ currentPage }}/{{ pageCount }}</div>
        <van-button type="primary" size="small" @click="changePdfPage('down')">下一页</van-button>
      </div>
      <pdf
        :src="pdfSrc"
        :page="currentPage"
        @num-pages="pageCount = $event"
        @page-loaded="currentPage = $event"
        @loaded="loadPdfHandler"
        @error="loadError"
      />
    </van-popup>

import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'

open(url){
      this.pdfSrc = pdf.createLoadingTask({
        url,
        CMapReaderFactory
      })
      // this.pdfSrc = url
      this.show = true
    },
 loadPdfHandler() {
      this.currentPage = 1 // 加载的时候先加载第一页
    },
// 加载失败
    loadError(err) {
      console.log(err)
      // this.$toast.fail('加载pdf失败！')
    },