首页 > 其他分享 >分享基于PDF.JS的移动端PDF阅读器代码

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

时间:2024-09-04 18:21:56浏览次数:14  
标签:index pdfViewer plugin viewer JS html 阅读器 PDF vite

一、前言

在之前的文章《分享基于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

相关文章

  • JSP金融产品销售系统的设计与实现7057n--程序+源码+数据库+调试部署+开发环境
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表技术要求:开发语言:JSP前端使用:HTML5,CSS,JSP动态网页技术后端使用SpringBoot,Spring技术主数据库使用MySQL开题报告内容一、研究背景与意义随着金融市场的......
  • 基于jsp教研室教学日历管理系统设计与实现的计算机毕设
    教研室教学日历管理系统设计与实现摘要互联网的普及给人们带来的便利不需多说。因此如果把教研室教学日历管理与互联网结合起来,利用java技术建设教研室教学日历管理系统,实现教研室教学日历管理的网络化。教研室教学日历管理系统能够通过互联网得到广泛的、全面的宣传,让尽可能多的......
  • 基于jsp塔尔寺景点门票销售管理系统的设计与实现的计算机毕设
    塔尔寺景点门票销售管理系统的设计与实现摘  要随着科学技术的迅速发展,人们的生活节奏大大加快,很多人都想用最短的时间、最少的精力办好事。在日常生活中,尤其是在购物这个环节中,网上交易越来越普及,越来越多的人选择网上交易,节省时间的同时,也可以节省精力,最重要的是,网上交易,可以......
  • 如何使用mediainfo.js来获取视频信息
    如何使用mediainfo.js来获取视频信息安装首先是安装改插件,这里GitHub中有很多介绍,这里介绍常用的node引入和CDN引入Node.js在npm上安装mediainfo.js$npminstall-gmediainfo.js后在需要的文件中importMediaInfofrom"mediainfo.js";这样输出MediaInfo发现是如下方法......
  • Nextjs项目中轻松添加深色和浅色主题支持
    在React或Next.js项目中实现深色和浅色主题的切换功能其实并不复杂。通过一些简单的步骤,就可以让用户在浏览网页时自由选择他们喜欢的显示模式,无论是经典的浅色主题还是更护眼的深色主题。下面我将介绍如何轻松添加这一功能。确保你已经在项目中使用了React或Next.js。如果你是初......
  • 深入理解JavaScript类与对象:揭秘类字段和静态属性的妙用,js静态属性和实例属性
    在深入理解JaScript类与对象的过程中,类字段和静态属性是两个关键的概念,掌握它们的用法可以让你在实际开发中更加得心应手。虽然JaScript在ES6之前并没有类的概念,但通过ES6及以后的版本,引入了类语法糖,使得我们能够更直观地定义和使用类。类字段是指在类中直接定义的属性,而不是在构......
  • 基于jsp校园拼餐系统设计与实现的计算机毕设
    校园拼餐系统设计与实现摘要信息技术的飞速发展,特别是互联网的广泛普及,为“拼餐”信息的发布、检索以及“拼餐”条件的协商提供了中介平台,在百度上进行搜索,可以发现,几乎每个大城市都有自己的卖家(拼餐)网,“拼”作为一种崭新的生活方式已逐渐被人们所接受,本文针对拼餐,以方便人们进行......
  • 开源的three.js cesium.js 各种案例
    Three.js基础和标准功能学习模型加载-使用three.js加载不同格式的模型。轮廓光后期处理得各种效果。几十款着色器如智慧城市扫光,结合各种shaderToy.等粒子,各种应用场景效果案例。还有小米su7,等优美的高级案例,还有比较火得3d地图学习。集成各种相关得应......
  • uniapp js 数独小游戏 写死的简单数独demo(优化完成) 数独 4.0
    <template> <viewclass="wrap">  <viewclass="timeGame">   <textclass="time">时间{{gameTime}}</text>  </view>  <viewclass="listWrap">   <view    ......
  • 【学习】【JavaScript 安全】JS代码混淆技术
    一、布局混淆1.1删除无效代码1.2标识符重命名二、数据混淆2.1数字混淆2.1.1进制转换2.1.2数学技巧2.1.3数字拆解2.2布尔混淆2.2.1类型转换2.2.2构造随机数2.3字符串混淆2.4undefined和null混淆......