当前位置：首页 > article >正文

分享基于PDF.JS的移动端PDF阅读器代码

article 2025/1/10 23:56:13

一、前言

在之前的文章《分享基于PDF.js的pdf阅读器代码》里提到了PC端基于PDF.js的阅读器，本文将提供针对移动端的版本。

二、pdfViewer

为了能够直接使用，这里分享一下经过简单修改后能直接使用的pdfViewer代码：

pdfViewer代码目录（pdfViewer代码包本文查看附件）：

在这里插入图片描述

以Vue工程为例：
①将pdfViewer代码放到pubilc目录下（pdfViewer代码包本文查看附件）
②使用下面的链接进行pdf访问：http://xxx/pdfViewer/web/viewer.html?file=pdfUrl，例如：http://localhost:9999/pdfViewer/web/viewer.html?file=http://localhost:9999/pdfViewer/web/compressed.tracemonkey-pldi-09.pdf

其中，http://xxx 为项目访问地址。

为了能够直接访问到viewer.html，对于Vite项目需要做一些配置：

// src\router\index.ts

const router = createRouter({
  history: createWebHistory(),
  ...
})

// build\vite\plugin\html.ts

/**
 * Plugin to minimize and use ejs template syntax in index.html.
 * https://github.com/anncwb/vite-plugin-html
 */
import type { PluginOption } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'

export function configHtmlPlugin(env: ViteEnv) {
  const htmlPlugin: PluginOption[] = createHtmlPlugin({
    pages: [
      {
        filename: '/index.html',
        template: '/index.html',
      },
      {
        filename: '/mobile-viewer/viewer.html',
        template: '/public/pdfViewer/web/viewer.html'
      }
    ]
  })
  return htmlPlugin
}

// build\vite\plugin\index.ts
import { configHtmlPlugin } from './html'

/**
 * 配置 vite 插件
 * @param viteEnv vite 环境变量配置文件键值队 object
 * @param isBuild 是否是 build 环境 true/false
 * @returns vitePlugins[]
 */
export function createVitePlugins(viteEnv: ViteEnv) {
  const vitePlugins: (PluginOption | PluginOption[])[] = [
    // have to
    vue()
  ]

  // 加载 html 插件 vite-plugin-html
  vitePlugins.push(configHtmlPlugin(viteEnv))

  return vitePlugins
}

// vite.config.ts

import { createVitePlugins } from './build/vite/plugin'

export default ({ command, mode }: ConfigEnv): UserConfig => {
  return {
   // 其它配置
    ...
    // 加载插件
    plugins: createVitePlugins(viteEnv)
  }
}

预览效果：

在这里插入图片描述