【vue-pdf】PDF文件预览插件

这篇具有很好参考价值的文章主要介绍了【vue-pdf】PDF文件预览插件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1 插件安装

npm install vue-pdf

vue-pdf GitHub:https://github.com/FranckFreiburger/vue-pdf#readme

参考文档:https://www.cnblogs.com/steamed-twisted-roll/p/9648255.html

catch报错:vue-pdf组件报错vue-pdf Cannot read properties of undefined (reading ‘catch‘)_你看我像是会的样子吗?的博客-CSDN博客

2 代码示例

Example.01 超简单分页预览

<template>
    <div class="container">
      <div class="header">
        <van-nav-bar
          title="文件预览"
          left-text="关闭"
          left-arrow
          @click-left="returnTo"
        />
      </div>
      <div class="main">
        <pdf
          :src="src"
          :page="currentPage"
          @num-pages="pageCount=$event"
          @page-loaded="currentPage=$event"
          @loaded="loadPdfHandler">
        </pdf>
      </div>
      <div class="footer">
        <van-pagination v-model="currentPage" :page-count="pageCount" mode="simple"/>
      </div>
    </div>
</template>

<script>
  import pdf from 'vue-pdf'
  // 引入api
  import { getItemDetailAPI } from '@/api'

  export default {
    name: 'PreView',
    components: {
      pdf
    },
    data () {
      return {
        file_id: '',
        src: '',
        currentPage: 0, // pdf文件页码
        pageCount: 0 // pdf文件总页数
      }
    },
    created () {
      this.file_id = this.$route.query.item_id
      // this.fetchFileDetail()
      this.src = '/files/xxxx.pdf' // 本地测试版
    },
    methods: {
      returnTo () {
        // this.$router.go(-1)
        this.$router.back() // 返回
      },
      // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
      changePdfPage (val) {
        // console.log(val)
        if (val === 0 && this.currentPage > 1) {
          this.currentPage--
          // console.log(this.currentPage)
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
          // console.log(this.currentPage)
        }
      },
      // pdf加载时
      loadPdfHandler (e) {
        this.currentPage = 1 // 加载的时候先加载第一页
      },
      // 根据fileId获取文件
      async fetchFileDetail () {
        /** 文件地址 **/
          // this.src = `/hbdjv1/files/${this.file_name}` // 发布版
          // this.src = `/files/${this.file_name}` // 本地测试版
        const params = {
            file_id: this.file_id
          }
        this.$toast.loading({ // 打开toast提示
          message: '加载中...',
          forbidClick: true,
          loadingType: 'spinner',
          duration: 0
        })
        console.log('=====文件详情===')
        console.log(params)
        const res = await getItemDetailAPI(params)
        this.$toast.clear() // 关闭toast
        if (res && res.code === 200) {
          if (res.data && res.data.length > 0) {
            this.src = res.data[0].url
          }
        }
      }
    }
  }
</script>

Example.02 少于20页滚动预览,多于20分页预览文章来源地址https://www.toymoban.com/news/detail-622245.html

<template>
  <div class="container">
    <div class="header">
      <van-nav-bar
        title="文件预览"
        left-text="关闭"
        left-arrow
        @click-left="returnTo"
      />
    </div>
    <div class="main" v-if="loaded">
      <!-- 页数 <= 20 直接滑动 -->
      <div v-show="pageCount <= divider ">
        <pdf v-for="index in pageCount" :key="index" :src="src" :page="index"></pdf>
      </div>
      <!-- 页数 > 20 分页 -->
      <div v-show="pageCount > divider">
        <pdf
          :src="src"
          :page="currentPage"
          @num-pages="pageCount=$event"
          @page-loaded="currentPage=$event"
          @loaded="loadPdfHandler">
        </pdf>
      </div>
    </div>
    <div class="footer" v-show="pageCount > divider" v-if="loaded">
      <van-pagination v-model="currentPage" :page-count="pageCount" mode="simple"/>
    </div>
    <van-empty description="文件加载失败" v-else/>
  </div>
</template>
<script>
  import pdf from 'vue-pdf'
  // 引入api
  import { getItemDetailAPI } from '@/api'

  export default {
    name: 'PreView',
    components: {
      pdf
    },
    data () {
      return {
        file_id: '',
        src: '',
        currentPage: 0, // pdf文件页码
        pageCount: 0, // pdf文件总页数
        divider: 20, // 设置分割数
        loaded: false
      }
    },
    created () {
      this.file_id = this.$route.query.item_id
      this.fetchFileDetail()
    },
    methods: {
      returnTo () {
        // this.$router.go(-1)
        this.$router.back() // 返回
      },
      // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
      changePdfPage (val) {
        // console.log(val)
        if (val === 0 && this.currentPage > 1) {
          this.currentPage--
          // console.log(this.currentPage)
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
          // console.log(this.currentPage)
        }
      },
      // pdf加载时
      loadPdfHandler (e) {
        this.currentPage = 1 // 加载的时候先加载第一页
      },
      // 根据fileId获取文件
      async fetchFileDetail () {
        /** 文件地址 **/
          // this.src = `/hbdjv1/files/${this.file_name}` // 发布版
          // this.src = `/files/${this.file_name}` // 本地测试版
        const params = {
            file_id: this.file_id
          }
        this.$toast.loading({ // 打开toast提示
          message: '加载中...',
          forbidClick: true,
          loadingType: 'spinner',
          duration: 0
        })
        console.log('=====文件详情===')
        console.log(params)
        const res = await getItemDetailAPI(params)
        this.$toast.clear() // 关闭toast
        if (res && res.code === 200) {
          if (res.data && res.data.length > 0) {
            // this.src = res.data[0].url
            this.src = pdf.createLoadingTask(res.data[0].url)
            this.src.promise.then(pdf => {
              this.$nextTick(() => {
                this.pageCount = pdf.numPages // pdf总页数
                this.loaded = true
              })
            })
          }
        }
      }
    }
  }
</script>

到了这里,关于【vue-pdf】PDF文件预览插件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue前端预览pdf并加水印、ofd文件,控制打印、下载、另存,vue-pdf的使用方法以及在开发中所踩过的坑合集

    根据公司的实际项目需求,要求实现对pdf和ofd文件的预览,并且需要限制用户是否可以下载、打印、另存pdf、ofd文件,如果该用户可以打印、下载需要控制每个用户的下载次数以及可打印的次数。正常的预览pdf很简单,直接调用浏览器的预览就可以而且功能也比较全,但是一

    2024年02月16日
    浏览(172)
  • 前端(vue)js在线预览PDF、Word、Excel、ppt等office文件

    可选参数 pdf=true,word文档尝试以pdf方式显示,默认false watermark=水印文本,显示文本水印;“img:”+图片url表示图片水印,如:img:https://view.xdocin.com/demo/wm.png saveable=true,是否允许保存源文件,默认false printable=false,是否允许打印,默认true ©able=false,是否允许选择复制内容,

    2024年02月13日
    浏览(70)
  • 使用vue-pdf插件加载pdf

    安装: 使用: 报错:  这样执行会报一个catch的错误,然后找到node_modules下面的vue-pdf目录src文件下面的pdfjsWrapper.js文件中,第197行的catch注释掉就好。

    2024年01月18日
    浏览(45)
  • 前端js打开pdf文件--文件通过浏览器打开,以pdf形式进行预览

    通过点击button按钮,触发 @click=\\\"openPDF(performance_report)\\\"方法,把对应需要展示的pdf传送到openPDF()方法内,这里的pdf文件格式必须包括id、name、url。 在这里,performance_report为预览的文件:

    2024年02月14日
    浏览(53)
  • Vue中使用pdf.js实现在线预览pdf文件流

    以下是在Vue中使用pdf.js实现在线预览pdf文件流的步骤: 在需要使用的组件中,使用以下代码引入pdf.js: 使用pdf.js的 getDocument() 方法加载pdf文件流。可以将文件流作为Blob对象传递给该方法。例如,可以使用axios从服务器获取pdf文件流: 在 loadPdf() 方法中,使用 getDocument() 方法

    2024年02月09日
    浏览(67)
  • vue+pdf.js预览本地pdf文件(可以复制文本,滚动页码展示)

    1、安装pdfjs-dist插件,推荐使用2.0.943这个版本 2、页面中引入使用 3、页面标签 3、解析pdf,获取pdf所有页数据,使用canvas渲染,并使用TextLayerBuilder创建文本层,可以复制文本信息 在渲染pdf数据时,当pdf文件很大渲染量很多时,会导致页面卡住,无法执行其他操作;这涉及到

    2024年01月21日
    浏览(50)
  • vue 纯前端预览pdf,纯前端实现pdf加水印下载文件也带水印,防止pdf下载

      原理:主要是利用pdfh5这个插件来完成的   使用方法:   1.页面需要有一个容器例子:div id=\\\"demo\\\"/div   2.下载pdfh5插件 npm install pdfh5   (注意:webpack5之后不会下载polyfill 需要手动下载 所以引入pdfh5的时候会报错)   解决方案:下载 node-polyfill-webpack-plugin npm install node-polyfill-

    2024年04月15日
    浏览(63)
  • vue-pdf多页预览异常,Rendering cancelled, page 1 Error at BaseExceptionClosure xxx

    项目开发使用vue-pdf,单页情况预览正常,多页vue-pdf预览异常,第一次预览时,会先弹出异常模态窗口,关闭模态窗口,pdf又是正常显示,报错信息及异常截图如下: 异常截图,点击右上角关闭X,pdf是正常预览,再次打开后也能正常预览,仅第一次打开预览有异常。 1.vue-pdf预

    2024年02月07日
    浏览(41)
  • 【vue2】纯前端实现本地的pdf/word/epub文件预览

    需求是预览本地的pdf/word/epub格式的文件,但是搜索后发现没有可以直接使用的,格式不同,显示的方式和效果也都略有不同。 最后还是 分别实现预览 的功能。 如果只需要预览pdf/word等格式的话,可以使用的方案:vue-office,支持多种文件(docx、excel、pdf)预览的vue组件库,支持

    2024年02月11日
    浏览(74)
  • 【vue2】纯前端实现本地的pdf/word/epub文件预览(包括pdf选中文字,epub高亮等)

    需求是预览本地的pdf/word/epub格式的文件,但是搜索后发现没有可以直接使用的,格式不同,显示的方式和效果也都略有不同。 最后还是 分别实现预览 的功能。 如果只需要预览pdf/word等格式的话,可以使用的方案:vue-office,支持多种文件(docx、excel、pdf)预览的vue组件库,支持

    2024年02月11日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包