、其他教程写得太老了,可能到如今已经不再适用。
1、jsp实现pdf文件在线预览功能
方式一、pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览
<a href=”文档地址”></a>
方式二、通过jquery插件
jquery.media.js
实现
这个插件可以实现pdf预览功能(包括其他各种
媒体文件
)但是对word等类型的文件无能为力。
实现方式:
js代码:
<script type=”text/javascript” src=”jquery-1.7.1.min.js”></script>
<script type=”text/javascript” src=”jquery.media.js”></script>
html结构:
<
div
id
=
"handout_wrap_inner"
>
</
div
>
</
body
>
调用方式:
$('#handout_wrap_inner').media({
width: '100%',
height: '100%',
autoplay: true,
src:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
</script>
方式三、直接通过页面内嵌iframe
$(<span class="hljs-string">"<iframe src='"</span>+ <span class="hljs-keyword">this</span>.previewUrl +<span class="hljs-string">"' width='100%' height='362px' frameborder='1'>"</span>).appendTo($(".video-handouts-preview"));
此外还可以在iframe标签之间提供一个提示类似这样
<iframe :src="previewUrl" width="100%" height="100%">
This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a>
</iframe>
方式四、通过<embed>标签嵌入内容
<embed :src="previewUrl" type="application/pdf" width="100%" height="100%">
此标签h5特性中包含四个属性:高、宽、类型、预览文件src!
与< iframe > < / iframe > 不同,这个标签是自闭合的的,也就是说如果浏览器不支持PDF的嵌入,那么这个标签的内容什么都看不到!
方式五、<object>标签和iframe使用差别较小
<object :src="previewUrl" width="100%" height="100%">
This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a>
</object>
除方式二以外其他都是直接通过标签将内容引入页面实现预览
方式六、PDFObject
PDFObject实际上也是通过<embed>标签实现的直接上代码
<!DOCTYPE html>
<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>
<div id="pdf_viewer"></div>
</body>
<script type="text/javascript">
if(PDFObject.supportsPDFs){
PDFObject.embed("index.pdf", "#pdf_viewer" );
} else {
location.href = "/canvas";
</script>
</html>
还可以通过以下代码进行判断是否支持PDFObject预览
if(PDFObject.supportsPDFs){
console.log("Yay, this browser supports inline PDFs.");
} else {
console.log("Boo, inline PDFs are not supported by this browser");
方式七、PDF.js
PDF.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件,非常强大,能将PDF文件渲染成Canvas。PDF.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,一个负责API解析,一个负责核心解析。
2、word、xls、ppt文件在线预览功能
word、ppt、xls文件实现在线预览的方式比较简单可以直接通过调用微软的在线预览功能实现 (预览前提:资源必须是公共可访问的)
<iframe src='https://view.officeapps.live.com/op/view.aspx?src=http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls' width='100%' height='100%' frameborder='1'>
</iframe>
src就是要实现预览的文件地址
具体文档看这微软接口文档
3、word文件
XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本、带参数文本、html文本、json文本、公文等在线预览,具体实现方法请看官方文档
下面这种方式可以实现快速预览word但是对文件使用的编辑器可能会有一些限制
<a href="http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=http://www.xdocin.com/demo/demo.docx" target="_blank" rel="nofollow">XDOC</a>
上述方法就是jsp实现在线预览pdf、word、xls、ppt等文件功能的记录。
具体代码和效果图,晚点贴出。
最近在做一个共享数字化平台,一些所涉功能知识记录一下。 、其他教程写得太老了,可能到如今已经不再适用。1、jsp实现pdf文件在线预览功能方式一、pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览&lt;a href=”文档地址...
在线预览PDF文件
前言 通过第三方工具OpenOffice转换为
PDF文件 具体可以查看我这篇文章 使用Java代码将
word、execl、
ppt文件转换为
pdf格式
一、
jsp格式
预览pdf
二、html格式
预览pdf
最近项目需要实现在线预览pdf文件功能,找来找去,发现有个pdf.js的类库挺好用,直接用js实现在线预览。
pdf.js是开源项目,github的地址:
https://github.com/mozilla/pdf.js
根据教程指引,有以下几个步骤:
- clone源码到本地,如果是linux的话很方便,windows的话要另外下载git工具;
git地址:https://git-fo
最近公司项目需求需要在线预览word文档,并且不能在在线下载和编辑。在此记录我是如何做的。
针对word的在线预览晚上大多给的解决方案就是先把word文件转成pdf,然后通过pdf.js在线预览pdf。
下面是详情详细的操作步骤;
1.springboot继承jodconverter把非pdf文件转成pdf
详细请查看我另一篇文章:https://blog.csdn.net/zenghu_...
1、前端实现pdf文件在线预览功能
方式一、pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览
<a href="文档地址"></a>
方式二、通过jquery插件jquery.media.js实现 这个插件可以实现pdf预览功能(包括其他各种媒体文件)但是对word等类型的文件无...
最近项目要求pdf和word可以在线预览功能,pc端还好解决,但是微信端就有点坑了,pc端原来的思路是将文件转成base64,然后用html格式显示 ,但是微信端不支持,
这种方式就pass掉了,谷歌本来就支持pdf预览的,用pdf.js就可以移动端和pc端在线预览,后来就干脆把所有的文件转成pdf格式,就可以支持移动端在线预览了!
首先是下载pdf.js,简单快速的方法就是直接用自带...
本书共18章:第1章介绍Servlet API和几个简单的Servlet;第2章讨论Session追踪,以及保持状态的4种技术;第3章和第4章系统讲解JSP的语法以及JSP中的重要特性之一:Expression Language;第5~7章分别阐述JSTL中最重要的类库、标签的具体编写方法和标签文件;第8~10章讨论Servlet中的事件驱动编程、过滤器,以及Model 2架构;第11章展示如何利用Servlet 3的文件上传特性,以及如何在客户端改善用户的体验;第12章解释如何通过编程方式将资源发送到浏览器;第13章介绍如何利用Decorator模式以及类来改变Servlet请求和响应的行为;第14章讨论Servlet 3中的一项新特性,用来处理异步的操作;第15章阐述如何通过声明和编程方式来保护Java的Web应用程序;第16章讨论Servlet/JSP应用程序的部署过程,以及部署描述符中的元素;第17章阐述Servlet 3中的两项新特性;第18章介绍Struts 2的用法。
JSP是一种用于动态生成网页的编程语言,它可以接收二进制流数据并将其解析成PDF格式,实现预览PDF功能。
在JSP中,可以通过Java IO类库的文件输入流(FileInputStream)读取二进制流数据,并使用PDF解析库(如iText)将其解析成PDF格式的文件。然后,使用PDF预览插件(如Adobe Reader)在网页中显示解析后的PDF文件。
具体实现过程如下:
1. 在JSP页面中,使用表单提交文件并跳转到处理页面。
2. 在处理页面中,使用request对象获取提交的文件流数据。
3. 使用Java IO类库的文件输入流(FileInputStream)读取文件流数据,并使用PDF解析库(如iText)将文件流数据转换为PDF格式的文件。
4. 将PDF文件存储在服务器端,或直接将其转换为字节数组并存储在内存中。
5. 在网页中使用PDF预览插件(如Adobe Reader),指定PDF文件的URL或字节数组,并在网页中显示预览效果。
需要注意的是,PDF预览插件需要在浏览器中安装和配置,否则可能会出现无法预览或预览效果不佳等问题。同时,PDF预览插件也可能存在安全风险,需要谨慎使用并遵守相关规定。
CSDN-Ada助手: