PDFObject实现pdf文件预览

官方例子：

https://pdfobject.com/#examples

下面主要解决非固定路径的pdf文件浏览

pdf的路径作为参数传入

<!DOCTYPE html>
<html>
<head><title>Show PDF</title><meta charset="utf-8" /><script type="text/javascript" src='pdfobject.min.js'></script><style type="text/css">html,body,#pdf_viewer{width: 100%;height: 100%;margin: 0;padding: 0;}</style>
</head>
<body><div id="pdf_viewer"></div>
</body>
<script type="text/javascript">if(PDFObject.supportsPDFs){// PDF嵌入到网页PDFObject.embed("${request.contextPath}/files/${pdfpath}", "#pdf_viewer" );} else {location.href = "/canvas";}
</script>
</html>

后端pdf参数绝对路径截取子目录路径

   /*** 在线打开pdf* @param request* @param response* @param model* @return*/@RequestMapping("/showPdf")public String showPdf(HttpServletRequest request, HttpServletResponse response, Model model) {String filepath= UriUtils.decode(request.getParameter("filepath"), "UTF-8");int index = filepath.indexOf("dir");filepath = filepath.substring(index+5, filepath.length());filepath = filepath.replaceAll("\\\\", "/");model.addAttribute("pdfpath",filepath);return "/modules/fileBroser/viewPagePdf.html";}

将pdf的绝对路径转换成项目的虚拟路径

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class MyPathConfig implements WebMvcConfigurer {@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/files/**").addResourceLocations("file:E:/dir/subdir/");}
}

PDFObject实现pdf文件预览相关推荐

Java使用openOffice转PDF以及PDF文件预览乱码问题
Java使用openOffice转PDF以及PDF文件预览乱码问题使用openOffice,支持doc, docx, .xls, .xlsx, .ppt, .pptx转pdf 一:依赖 <de ...
java pdf文件下载_Java后台返回PDF文件预览下载
Java后台返回PDF文件预览下载开始的代码的系统代码为: ResponseEntity onePdf = s3Wrapper.download(contractEntity.getContract ...
用vue-pdf包实现pdf文件预览，支持分页
vue项目实现pdf文件预览功能下载vue-pdf包 npm install --save vue-pdf template模板内容: //pdf组件 <pdf :src="pdfF ...
Vue PDF文件预览打印vue-pdf
Vue PDF文件预览vue-pdf 最近做项目,遇到预览PDF这个功能,在网上找了找,大多推荐的是pdf.js,不过在Vue中还是想偷懒直接npm组件,最后找到了一个还不错的Vue-pdf 组件,G ...
手机端pdf文件预览pdf.js使用方法详解
虽然H5页面可以通过A直接访问html 但可惜的是手机端H5页面这样做就直接变下载了那么想要实现手机端的pdf文件预览就需要用到pdf.js了首先我们访问地址 http://mozilla.g ...
mpvue PDF文件预览
小程序中PDF文件预览问题在小程序中可以ios端可以使用 <web-view :src="url"></web-view> 但是在Android端pdf ...
pdf文件预览、打印
前端 pdf 文件预览的方式有多种. html元素:<iframe>.<embed> <iframe :src="pdfUrl " style=&qu ...
Nginx配置文件目录实现pdf文件预览及下载
默认情况下,通过nginx服务器来访问pdf文件,在浏览器上是会直接打开该pdf文件呈现内容的.如果想要访问pdf文件时,实现下载文件的效果,则需要在nginx服务端做一些配置. 以下配置只能下载 n ...
vue 项目中分别使用 vue-pdf 插件和内嵌 iframe 实现 PDF 文件预览，缩放，旋转，下载，保存等功能？
需求:在 vue 和 element-ui 项目中,有点击按钮预览,下载,打印 PDF 文件需求,要求支持 PDF 的预览,上下页切换,首尾页切换,页码选择跳转,放大缩小,顺时针逆时针旋转,下载, ...

PDFObject实现pdf文件预览

PDFObject实现pdf文件预览相关推荐

最新文章

热门文章