2024年物联网嵌入式最新pdf在h5显示：vue-pdf 与 pdf(1)，2024年最新万字长文

本文链接：https://blog.csdn.net/2401_85011985/article/details/138848450

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新

如果要拿当前页面,我们可以通过

//拿到当前页码
this.$refs['pdf'].contentWindow.PDFViewerApplication.page
//拿到pdf总页数
this.$refs['pdf'].contentWindow.PDFViewerApplication.pagesCount

但是如果在单页面应用中,你有可能需要在同一个页面打开几个不同的pdf,传不同的src.就会出现一个问题:

当你需要回退的时候,你回退的页面是你上一次请求的pdf的页面:
如:我在/#/onlineClass页面跳转进入/#/onlineClassDetail,然后在该页面用iframe打开第一个pdf,然后我点击一个按钮,打开了第二个pdf.然后又打开第三个pdf文件.这时候我回退,我正常的需求是回退到上一个页面(既:/#/onlineClass),但是实际上,是会回退到请求第二个pdf,页面还是在/#/onlineClassDetail.
最后就是因为这个问题,我放弃了pdf.js

vue-pdf
直接npm下载

npm install --save vue-pdf

import pdf from 'vue-pdf'

//引入
export default {
  name: 'Demo',
  components: {
    pdf
  },

 <div @click="changePdfRotate">
    <pdf
      :class="{pdfH:pdfRotate !== 0}"
      :src="pdfFileSrc"
      :page="currentPage"
      :rotate="pdfRotate"
      @num-pages="pageCount=$event"
      @page-loaded="currentPage=$event"
      @loaded="loadPdfHandler"
    />
  </div>
  //这里是配上了上一页与下一页按钮
  <div v-if="!showViewPdf">
    <p class="arrow">
      <span class="m-btnn " :class="{grey: currentPage==1,trans:pdfRotate !== 0 }" @click="changePdfPage(0)">上一页</span>

      <span class="page" :class="{trans:pdfRotate !== 0}">{{ currentPage }} / {{ pageCount }}</span>
      <span class="m-btnn fr" :class="{grey: currentPage==pageCount,trans:pdfRotate !== 0}" @click="changePdfPage(1)">下一页</span>
    </p>

  </div>