一、前言
在之前的文章《分享基于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)
}
}
预览效果:
标签:index,pdfViewer,plugin,viewer,JS,html,阅读器,PDF,vite From: https://blog.csdn.net/q1003675852/article/details/141891920