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

最新推荐文章于 2024-05-11 09:38:32 发布

sskai163

最新推荐文章于 2024-05-11 09:38:32 发布

阅读量1.5k

点赞数 1

分类专栏： PDF 文章标签： bootstrap java

本文链接：https://blog.csdn.net/weixin_42393758/article/details/107357683

版权

PDF 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、引用

java word/excel转PDF：原文地址
前端PDFObject插件不能加载远程链接的问题：原文地址
前端实现预览的方法总结，如果资源是公共可访问的，推荐使用该文章中的微软在线预览功能实现：原文地址

二、效果图

在这里插入图片描述

三、前端

注：前端框架用的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>

sskai163

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端实现图片、PDF、word、excel文件预览，java word/excel转PDF

一、引用java word/excel转PDF：原文地址前端PDFObject插件不能加载远程链接的问题：原文地址前端实现预览的方法总结，如果资源是公共可访问的，推荐使用该文章中的微软在线预览功能实现：原文地址二、效果图三、前端注：前端框架用的bootstrap table，PDF预览使用的PDFObject（官网地址）。<body> <fieldset> <legend>附件</legend> <table id
复制链接

扫一扫