jsp中使用PDF.js实现pdf文件的预览

本文介绍的是在使用jsp作为模板引擎的spring-mvc项目中,如何利用 PDF.js实现pdf文件的预览。

1、下载 PDF.js

Getting Started (mozilla.github.io)

在这里插入图片描述

下载解压后其中有两个目录,直接将这两个文件夹放到项目的web资源目录中。此时相当于把PDF.js这个项目也同时部署到了当前项目中。优点是使用方便,缺点就是体积比较大。除此之外也可以单独部署,使用起来区别很小。

在这里插入图片描述

2、配置mime-type

打开pdf.js的build目录,可以看到其中的 .mjs文件,默认 spring-mvc没法识别,在 web.xml中添加下列配置

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 						http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"version="4.0">    <mime-mapping><extension>mjs</extension><mime-type>application/javascript</mime-type></mime-mapping>
</web-app>

添加完之后,可以直接访问一下web/viewer.html,默认会预览 compressed.tracemonkey-pldi-09.pdf 这个文件,这是pdf.js默认的预览文件。

在这里插入图片描述

注意:

如果可以访问到,但是没法预览,可以降低一下 pdf.js的版本,选一个3.x的版本

Releases · mozilla/pdf.js (github.com)

在这里插入图片描述

3、创建页面

创建一个用户预览pdf的jsp页面,内容如下:使用一个 iframe标签访问 viewer.html进行文件预览, iframesrc属性使用jstl标签,添加一个名为file参数,参数值为一个返回 pdf文件流的接口。

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="jstl" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head><title>viewPdf</title>
</head>
<body>
<iframe src="<jstl:url value="/pdfjs/web/viewer.html" />?file=/spring_mvc/getPdfFile.do?pdfUrl=${requestScope.get("pdfUrl")}" width="100%" height="100%" style="border: unset"></iframe>
</body>
</html>
    @GetMapping("/getPdfFile")public void getPdf(String pdfUrl, HttpServletResponse response) {try {URLConnection connection = new java.net.URL(pdfUrl).openConnection();InputStream inputStream = connection.getInputStream();response.setHeader("Content-Disposition", "attachment;fileName=test.pdf");response.setContentType("multipart/form-data");OutputStream outputStream = response.getOutputStream();IoUtil.copy(inputStream, outputStream);} catch (Exception e) {log.error(e.getMessage(), e);}}

此处是使用了一个可访问的url作为接口的参数,此处完全可以换成其他方式获取文件流。

4、创建一个页面控制器访问预览页面

@GetMapping("/viewPdf")public String viewPdf(@RequestParam("pdfUrl") String pdfUrl, HttpServletRequest request) {request.setAttribute("pdfUrl", pdfUrl);return "viewPdf";}

在页面上访问 /viewPdf接口,并传入一个 pdfUrl参数,该参数是一个可访问的pdf文件的url。

5、测试

使用 https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf测试预览。

访问本地的 viewPdf接口:

http://localhost:8081/spring_mvc/viewPdf.do?pdfUrl=https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

即可看到如下界面:
在这里插入图片描述

6、问题总结

如果在预览界面中功能按显示乱码,则可以在 web.xml中添加如下配置:

	<mime-mapping><extension>properties</extension><mime-type>application/octet-stream</mime-type></mime-mapping><mime-mapping><extension>bcmap</extension><mime-type>application/octet-stream</mime-type></mime-mapping>

具体原因见:pdf.js使用爬过的坑 - 只争朝夕,不负韶华 - 博客园 (cnblogs.com)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/196806.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2019年五一杯数学建模B题木板最优切割方案解题全过程文档及程序

2019年五一杯数学建模 B题 木板最优切割方案 原题再现 徐州某家具厂新进一批木板如表 1 所示&#xff0c;在家具加工的过程中&#xff0c;需要使用切割工具生产表 2所示的产品。假设&#xff1a;木板厚度和割缝宽度忽略不计。   请为该家具厂给出如下问题的木板最优切割方…

掌握Shell:从新手到编程大师的Linux之旅

1 shell介绍 1.1 shell脚本的意义 1.记录命令执行的过程和执行逻辑&#xff0c;以便以后重复执行 2.脚本可以批量处理主机 3.脚本可以定时处理主机 1.2 脚本的创建 #!/bin/bash # 运行脚本时候执行的环境1.3 自动添加脚本说明信息 /etc/vimrc # vim主配置文件 ~/.vimrc # 该…

生成对抗网络Generative Adversarial Network,GAN

Basic Idea of GAN Generation&#xff08;生成器&#xff09;  Generation是一个neural network&#xff0c;它的输入是一个vector&#xff0c;它的输出是一个更高维的vector&#xff0c;以图片生成为例&#xff0c;输出就是一张图片&#xff0c;其中每个维度的值代表生…

【数据结构】图的存储结构(邻接矩阵)

一.邻接矩阵 1.图的特点 任何两个顶点之间都可能存在边&#xff0c;无法通过存储位置表示这种任意的逻辑关系。 图无法采用顺序存储结构。 2.如何存储图&#xff1f; 将顶点与边分开存储。 3.邻接矩阵&#xff08;数组表示法&#xff09; 基本思想&#xff1a; 用一个一维数…

C#特性(Attribute)

C#特性&#xff08;Attribute&#xff09;是一种在程序中添加元数据的机制&#xff0c;它可以为代码提供额外的信息和指示。通过使用特性&#xff0c;我们可以为类、方法、属性等元素添加标记&#xff0c;以便在运行时进行更多的操作和决策。 C#特性是一种声明式编程的工具&…

解决 uniapp 开发微信小程序 不能使用本地图片作为背景图 问题

参考博文&#xff1a;uniapp微信小程序无法使用本地静态资源图片(背景图在真机不显示)的解决方法_javascript技巧_脚本之家 问题&#xff1a;uniapp 开发微信小程序&#xff0c;当使用本地图片作为 background-image 时&#xff0c;真机无法显示 解决&#xff1a; 方法一&am…

Redis新操作

1.Bitmaps 1.1概述 Bitmaps可以对位进行操作&#xff0c;实际上它就是一个字符串&#xff0c;可以将Bitmaps想象为一个以位为单位的数组&#xff0c;数组中的每个元素只能存储0或者1&#xff0c;数组的下标在Bitmaps被称为偏移量。 setbit key offset value&#xff1a;设置o…

32位单片机PY32F040,主频72M,外设丰富,支持断码LCD

PY32F040 系列微控制器采用高性能的 32 位 ARM Cortex-M0 内核,宽电压工作范围的 MCU。嵌入高达 128 Kbytes flash 和 16 Kbytes SRAM 存储器,最高工作频率 72 MHz。LQFP64封装两块出头就可以拿到&#xff0c;我们还有开发板和开发资料帮助客户更好的开发。 PY32F040 系列微控…

一起Talk Android吧(第五百五十三回:解析Retrofit返回的数据)

文章目录 1. 知识回顾2. 解析方法2.1 解析有效数据2.2 解析错误数据3. 示例代码4. 经验与总结4.1 经验分享4.2 内容总结各位看官们大家好,上一回中咱们说的例子是"Retrofit的基本用法",本章回中介绍的例子是" 如何解析Retrofit返回的数据"。闲话休提,言…

【AI视野·今日Robot 机器人论文速览 第六十三期】Thu, 26 Oct 2023

AI视野今日CS.Robotics 机器人学论文速览 Fri, 27 Oct 2023 Totally 27 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers 6-DoF Stability Field via Diffusion Models Authors Takuma Yoneda, Tianchong Jiang, Gregory Shakhnarovich, Matthew R. …

Windows安装nvm【node.js版本管理工具】

目录 下载安装包 安装 配置 配置node的国内镜像源 配置npm的国内镜像源 常用命令 查看可安装的node版本 安装指定的版本 查看已有的node版本列表 切换版本 下载安装包 https://github.com/coreybutler/nvm-windows/releases/tag/1.1.11 安装 安装过程就不贴了&#xff0…

单元测试,集成测试,系统测试的区别是什么?

实际的测试工作当中&#xff0c;我们会从不同的角度对软件测试的活动进行分类&#xff0c;题主说的“单元测试&#xff0c;集成测试&#xff0c;系统测试”&#xff0c;是按照开发阶段进行测试活动的划分。这种划分完整的分类&#xff0c;其实是分为四种“单元测试&#xff0c;…

2023最新最全【OpenMV】 入门教程

1. 什么是OpenMV OpenMV 是一个开源&#xff0c;低成本&#xff0c;功能强大的 机器视觉模块。 OpenMV上的机器视觉算法包括 寻找色块、人脸检测、眼球跟踪、边缘检测、标志跟踪 等。 以STM32F427CPU为核心&#xff0c;集成了OV7725摄像头芯片&#xff0c;在小巧的硬件模块上&a…

M2 Mac Xcode编译报错 ‘***.framework/‘ for architecture arm64

In /Users/fly/Project/Pods/YYKit/Vendor/WebP.framework/WebP(anim_decode.o), building for iOS Simulator, but linking in object file built for iOS, file /Users/fly/Project/Pods/YYKit/Vendor/WebP.framework/WebP for architecture arm64 这是我当时编译模拟器时报…

2.2 调用星火大模型的API

调用星火大模型的API 1 申请API调用权限&#xff1a;2 调用原生星火 API3 统一API调用方式 项目仓库地址&#xff1a;https://github.com/datawhalechina/llm-universe 讯飞星火认知大模型&#xff0c;由科大讯飞于2023年5月推出的中文大模型&#xff0c;也是国内大模型的代表…

2.3 调用智谱 API

调用智谱 API 1 申请调用权限2 调用智谱 AI API3 使用 LangChain 调用智谱 AI参考&#xff1a; 智谱 AI 是由清华大学计算机系技术成果转化而来的公司&#xff0c;致力于打造新一代认知智能通用模型。公司合作研发了双语千亿级超大规模预训练模型 GLM-130B&#xff0c;并构建了…

PostgreSQL基于Citus实现的分布式集群

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&am…

JQuery ajax 提交数据提示:Uncaught TypeError:Illegal invocation

JQuery ajax 提交数据提示&#xff1a;Uncaught TypeError:Illegal invocation 1 问题描述 用jQuery Ajax向DRF接口提交数据的时候&#xff0c;console提示&#xff1a;Uncaught TypeError:Illegal invocation(未捕获的异常&#xff1a;非法调用)。 这个问题可能有两种原因导…

vue实现调用手机拍照、录像功能

目录 前言 准备工作 在这个示例中&#xff0c;我们将使用Vue.js框架来实现我们的目标。如果你还不熟悉Vue.js&#xff0c;推荐先学习一下Vue.js的基础知识。 接下来&#xff0c;我们需要创建一个基于Vue.js的项目。你可以使用Vue CLI来创建一个全新的Vue项目&#xff1a;# …

小程序授权获取昵称

wxml: <form bindsubmit"formsubmit"><view style"width: 90%;display: flex;margin-left: 5%;"><view class"text1">昵称&#xff1a;</view><input style"width: 150px;margin-left: 30px;margin-top: 30px;…