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

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

news 2025/7/30 22:07:30

一、前言

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

二、pdfViewer

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

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

在这里插入图片描述

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

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

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

// src\router\index.tsconst 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 tovue()]// 加载 html 插件 vite-plugin-htmlvitePlugins.push(configHtmlPlugin(viteEnv))return vitePlugins
}

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

预览效果：

在这里插入图片描述