用pdf.js来打开pdf遇到的问题

qq_32355961 2016-09-22 09:36:52
最近做项目,用了pdf.js在实现在网页上打开PDF文件,但是pdf文件过大的话,浏览器加载很慢,甚至会报错(ie浏览器错误信息是说内存不足,谷歌浏览器则正常运行)。这个问题怎么解决呢?为什么在谷歌浏览器运行正常,pdf正常显示,用ie打开就报错了,说内存不足。。。。这个pdf文件74M,ie打开就报错了。。还用了10M的PDF文件,10M的话ie是正常显示,谷歌也是。

所以我想着用分页来解决。。想问下各位亲,怎么使pdf文件每次加载一页,然后手动翻页。下一页上一页的按钮已经做好了。这个是pdf.js插件自带的,但是问题就是每次打开pdf都是整个PDF都打开了。。然后要用滚动条往下拉,然而加载速度很慢。不知道有没有办法是让pdf每次都只加载一页咯。。。。。


总结,就是2个问题。。。ie浏览器报错,错误信息是:内存不足,第二个问题就是怎么让PDF文件一次只显示一页,而不是一次性加载全部
...全文
9494 8 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
wp439740394 2019-11-02
  • 打赏
  • 举报
回复

<template>
  <div class="pdf-wrapper">
    <div class="pdf-container">
      <div class="page-btn" @click="handleClickPdfPrev">
        <img src="../../assets/images/prev.png" alt="">
      </div>
      <div class="pdf">
        <div class="cav" ref="cavWrapper">
          <canvas ref="cav" :id="id"></canvas>
        </div>
      </div>
      <div class="page-btn" @click="handleClickPdfNext">
        <img src="../../assets/images/next.png" alt="">
      </div>
    </div>
    <loading v-if="!alivable" :text="pdfTipText"></loading>
    <div class="pdf-footer">
      <p v-if="alivable">{{pageNumber}} / {{total}}</p>
      <p v-else>正在分页...</p>
    </div>
  </div>
</template>

<script>
  import loading from './loading'
  import PDFJS from 'pdfjs-dist'
  import workerSrc from 'pdfjs-dist/build/pdf.worker.entry'
  import { baseUrl } from "../../api/api";

  export default {
    name: 'pdfRead',
    components: {
      loading
    },
    props: {
      id: {
        type: [String, Number],
        default: 'read1'
      },
      bookUrl: {
        type: String
      }
    },
    data(){
      return {
        alivable: false,
        pdfTipText: 'PDF解析中...',
        pageTipText: '正在生产分页...',
        pageNumber: null,
        total: null,
        baseUrl
      }
    },
    mounted(){
      this._initPdf()
    },
    methods: {
      // 下一页
      handleClickPdfNext(){
        if (this.alivable) {
          this.pageNumber++
          this.pageNumber = this.pageNumber > this.total ? this.total : this.pageNumber
          this.renderPage(this.pageNumber)
        }
      },
      // 上一页
      handleClickPdfPrev(){
        if (this.alivable) {
          this.pageNumber--
          this.pageNumber = this.pageNumber < 1 ? 1 : this.pageNumber
          this.renderPage(this.pageNumber)
        }
      },
      // 初始化PDF
      _initPdf(){
        PDFJS.workerSrc = workerSrc
        PDFJS.getDocument(this.baseUrl + this.bookUrl).then(_pdfdoc => {
          this.alivable = true
          this.PDFDOC = _pdfdoc
          this.total = this.PDFDOC.numPages
          this.pageNumber = 1
          this.renderPage(this.pageNumber)
        }).catch(err => {
        })
      },
      renderPage (num) {
        if (this.alivable) {
          this.ctx = this.$refs.cav.getContext('2d')
          this.PDFDOC.getPage(num).then(page => {
            const viewport = page.getViewport(1)
            this.scale = this.$refs.cavWrapper.offsetHeight / viewport.height
            const size = page.getViewport(this.scale)
            this.$refs.cav.height = size.height
            this.$refs.cav.width = size.width
            const renderContext = {
              canvasContext: this.ctx,
              viewport: size
            }
            this.renderTask = page.render(renderContext)
          })
        }
      }
    }
  }
</script>
这是我的vue源码 pdf.js 分页渲染的 仅供参考
qq_27367255 2017-06-08
  • 打赏
  • 举报
回复
楼主是怎么一次加载全部的? 我不想一次加载一页
june_139 2017-05-18
  • 打赏
  • 举报
回复
还有个问题就是用pdf.js打开比较早的pdf文档会乱码
FancyKong666 2017-04-19
  • 打赏
  • 举报
回复
楼主解决了吗?求教
Finley-Ning 2017-02-17
  • 打赏
  • 举报
回复
引用 2 楼 hou6386083 的回复:
楼主,使用<iframe>标签可以解决
求例子。。
baidu_25471139 2016-12-28
  • 打赏
  • 举报
回复
怎样解决的?求分享
hou6386083 2016-12-12
  • 打赏
  • 举报
回复 1
楼主,使用<iframe>标签可以解决
hou6386083 2016-11-17
  • 打赏
  • 举报
回复
同问,楼主解决了吗,解决了求分享经验

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧