vue插件开发使用pdf.js实现手机端在线预览pdf文档

最新推荐文章于 2025-07-07 16:17:52 发布

原创

最新推荐文章于 2025-07-07 16:17:52 发布 · 3.2w 阅读

31 ·

CC 4.0 BY-SA版权

本文介绍如何借助pdf.js插件在Vue项目中实现在手机浏览器上预览PDF文件，详细讲解了从安装插件到解决跨域、模糊问题的过程，并提供多次更新的Demo资源链接。

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

目前大多数PC浏览器支持在线预览pdf文件，但大多数手机浏览器还未支持，尝试用手机浏览器打开一个pdf文件会弹出是否下载的提示框。网上查了一些资料，在实现的过程中，还是走了比较多的弯路，最后采用了倍受推荐的pdf.js插件来实现（文末附Demo）。

pdf.js可以从github上clone下来，然后本地gulp生成可用的pdf.js和pdf.worker.js（参考readme即可）。github地址是：https://github.com/mozilla/pdf.js。

不过更简单的方法是使用cnpm来安装： cnpm isntall --save pdfjs-dist，然后可以在项目中使用了，我写成了插件的形式。具体使用示例：

pdf.vue

<template>
  <div id="container">
    <!-- <div class='pdf-page'> -->
      <canvas id="the-canvas"></canvas>
      <div class="foot" v-if='pdfDoc'>
        <button class='left' v-if="pageNum>1" @click="onPrevPage">上一页</button>
        <button class='right' v-if="pageNum<pdfDoc.numPages" @click="onNextPage">下一页</button>
      </div>
    <!-- </div> -->
  </div>