用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写文章

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