前端实现图片、PDF、word、excel文件预览,java word/excel转PDF

一、引用
  1. java word/excel转PDF: 原文地址
  2. 前端PDFObject插件不能加载远程链接的问题:原文地址
  3. 前端实现预览的方法总结,如果资源是公共可访问的,推荐使用该文章中的微软在线预览功能实现:原文地址
二、效果图

在这里插入图片描述
在这里插入图片描述

三、前端

注:前端框架用的bootstrap table,PDF预览使用的PDFObject(官网地址)。

<body>
    <fieldset>
		<legend>附件</legend>
		<table id="table"></table>
	</fieldset>
	 
  	<script src="/bower_components/jquery/dist/jquery.min.js"></script>
  	<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  	<script src="/bower_components/bootstrap-table/dist/bootstrap-table.min.js"></script>
  	<script src="/bower_components/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
	<script src="/bower_components/layer/dist/layer.js"></script>
	<script>
		function initData(id){
			initTable(id)
		}

		function initTable(id){
			$('#table').bootstrapTable({
				method: 'get',
				dataType: "json",
				url: QGFrame.basePath.common + "/attach/list",
				sidePagination: "server",
			  	striped: true,
				pagination: false,
				queryParams: function(params) {
			        var condition = new Object();
			        condition.module = "FINANCE_STATEMENT";
			        condition.bizId = id;
			        return condition;
		      	},
			  	columns:[
				  	{title:'序号',align:'center',
				  		formatter:function(value, row, index){
			  			 	return index + 1;
				  		}
				  	},
			        {field:'createDate',title:'创建时间'},
			        {field:'originalName',title:'名称'},
			        {field:'size',title:'大小'},
					{
						field: 'preView',
						title: '预览',
						//定义点击之后放大图片的事件
						events: 'operateEvents',
						formatter: function (value, row, index) {
							return '<a class="view"  href="javascript:void(0)">预览</a>';
						}
					},
			        // {field:'description',title:'备注'},
			        {field:'operator',title:'操作',
				  		formatter:function(value, row, index){
				  			return '<a href="javascript:void(0)" onclick="downloadFile('+row.id+')">下载</a>';
				  		}
			        }
				],
				onLoadSuccess: function(res){
					if(res.data == null){
						res.data = [];
					}
					$('#table').bootstrapTable("load",res.data);
				}
			});
		}
		
		function downloadFile(id){
			window.location.href = QGFrame.basePath.common + "/attach/download/"+id;
		}

		// //点击之后放到图片
		window.operateEvents = {
			'click .view': function (e, value, row, index) {
				top.layer.msg("文件读取中。。。");
				if (row.name.indexOf("jpg") !== -1 || row.name.indexOf("jpeg") !== -1 || row.name.indexOf("png") !== -1) {
					var url = QGFrame.basePath.common + "/attach/preView/"+row.id;
					layer.open({
						type: 1,
						title: false,
						closeBtn: 0,
						area: ['80%', '80%'],
						skin: 'layui-layer-nobg', //没有背景色
						shadeClose: true,
						content: '<img style="width: 100%;height: 100%" src="'+url+'"/>'
					});
				} else {
					layer.open({
						type: 2,
						title: false,
						closeBtn: 0,
						area: ['80%', '80%'],
						skin: 'layui-layer-nobg', //没有背景色
						shadeClose: true,
						content: "/webapp/erp/html/component/preview/list.html",
						success: function(layero, index){
							var iframeWin = window[layero.find('iframe')[0]['name']];
							iframeWin.initContainer(row);
						}
					});
				}
			},
		};
  	</script>
</body>

预览js文件

<body>
    <div id="pdf_viewer"></div>

    <script src="/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="/bower_components/bootstrap-table/dist/bootstrap-table.min.js"></script>
    <script src="/bower_components/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="/bower_components/layer/dist/layer.js"></script>
    <script src="/bower_components/jspdf/pdfobject.min.js"></script>
    <script type="text/javascript">
        var options = {
            pdfOpenParams: {
                pagemode: "thumbs",
                navpanes: 0,
                toolbar: 0,
                statusbar: 0,
                view: "FitV"
            }
        };

        function initContainer(row){
            var attachUrl = QGFrame.basePath.common + "/attach/preView/"+row.id;
            $("#pdf_viewer").show();
            if(PDFObject.supportsPDFs){
                // PDF嵌入到网页
                PDFObject.embed(attachUrl, "#pdf_viewer" ,options);
            } else {
                location.href = "/canvas";
            }
        }
    </script>
</body>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端实现在线常用文件的方法有两种: 1. 使用第三方插件或工具,如 Google Docs、Office Online、PDF.js 等,这些工具可以将文件化为网页格式进行在线。 2. 使用 HTML5 提供的文件功能,支持常用的图片、音频、视频和 PDF文件。 下面分别给出实现方法和示例代码: 1. 使用第三方插件或工具 Google Docs 示例: ```html <!-- 在 HTML 中嵌入 Google Docs 链接 --> <iframe src="https://docs.google.com/gview?url=http://example.com/sample.docx&embedded=true"></iframe> ``` Office Online 示例: ```html <!-- 在 HTML 中嵌入 Office Online 链接 --> <iframe src="https://view.officeapps.live.com/op/embed.aspx?src=http://example.com/sample.docx"></iframe> ``` PDF.js 示例: ```html <!-- 在 HTML 中嵌入 PDF.js 链接 --> <iframe src="https://mozilla.github.io/pdf.js/web/viewer.html?file=http://example.com/sample.pdf"></iframe> ``` 2. 使用 HTML5 提供的文件功能 图片示例: ```html <!-- 在 HTML 中嵌入图片 --> <img src="http://example.com/sample.jpg" alt="Sample Image" /> ``` 音频示例: ```html <!-- 在 HTML 中嵌入音频 --> <audio src="http://example.com/sample.mp3" controls></audio> ``` 视频示例: ```html <!-- 在 HTML 中嵌入视频 --> <video src="http://example.com/sample.mp4" controls></video> ``` PDF 文件示例: ```html <!-- 在 HTML 中嵌入 PDF 文件 --> <embed src="http://example.com/sample.pdf" type="application/pdf" /> ``` 以上是常见文件在线实现方法和示例代码,具体实现还需根据具体需求和技术栈来选择最适合的方案。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值