jsp页面实现移动端预览pdf文件

最新推荐文章于 2025-03-21 17:49:45 发布

司徒司空

最新推荐文章于 2025-03-21 17:49:45 发布

阅读量2.4k

点赞数

分类专栏：文件类文章标签：文件预览

本文链接：https://blog.csdn.net/weixin_43739804/article/details/86717806

版权

手机端预览显示pdf文件

需求：后台传递到前端页面的pdf文件路径、pdf.js文件、pdf.worker.js文件。这两个插件网上资源挺多，自行查找。
以下是实现预览功能的jsp页面的代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<%-- 具体js插件和css样式根据需求自行引入 --%>
    <link rel="stylesheet" href="../css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <script src=" ../jquery.min.js"></script>
    <script src="../pdf.js"></script>
    <script src="../pdf.worker.js"></script>
    
    <style type="text/css">
        .close-pdf{position:fixed; top:20px; right:20px; color:#1d69b3; }
        button{width:40px; border:none; background: none; color:#1d69b3; font-size: 20px; outline: none;}
        .control{
            position: fixed;
            bottom: 20px;
            left: 50%;
            margin-left: -1