pdf文件在前端页面展示（谷歌游览器）
springboot的映射配置
@Configurationpublic
public class MyWebMvcConfigurerAdapter extends WebMvcConfigurerAdapter {@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) { /*** 资源映射路径* addResourceHandler：访问映射路径* addResourceLocations：资源绝对路径*/registry.addResourceHandler("/image/**").addResourceLocations("file:D:/temp/image/");}}localhost：8080/image/ 加上图片名。。就可以访问
@Configuration
public class MyWebAppConfigurer implements WebMvcConfigurer {@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/image/**").addResourceLocations("file:D:/temp-rainy/");}
}SSM项目的pom配置
<plugin><groupId>org.apache.tomcat.maven</groupId><artifactId>tomcat7-maven-plugin</artifactId><configuration><!-- 网站url地址根目录 --><path>/ftp</path><!-- 网站调试启动端口号 --><port>8080</port><staticContextDocbase>E:\ftp</staticContextDocbase><staticContextPath>/ftpReader</staticContextPath><!-- 默认编码 --><uriEncoding>UTF-8</uriEncoding></configuration></plugin>
打开tomcat下conf文件夹中的server.xml在Host标签下添加如下代码
<Context reloadable="true" docBase="E:\images" path="/images" /><!-- Tomcat\conf\web.xml -->
<!-- 默认为false,即为不展示根目录文件列表；修改为true,重启tomcat即可。 --><init-param><param-name>listings</param-name><param-value>false</param-value></init-param>
将base64在前端转图片查看
showPdf.js
function base64ToUint8Array(base64) {var raw = atob(base64); var uint8Array = new Uint8Array(new ArrayBuffer(raw.length));for (var i = 0; i < raw.length; i++) {uint8Array[i] = raw.charCodeAt(i);}return uint8Array;}var totalPg=null;function dPlay(numb){$('#canvas').empty();var binarydatas = base64ToUint8Array(datas);PDFJS.getDocument(binarydatas).then(pdf=>{//getPage里面的参数用于处理当前页//pdf中也有相应的参数可以获取页数console.log(pdf);totalPg=pdf.pdfInfo.numPages;debugger;var i=numb;pdf.getPage(i).then(page=>{var scale = 1;var viewport= page.getViewport(scale);// Prepare canvas using PDF page dimensions.var canvas= document.getElementById('canvas');var context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;// Render PDF page into canvas context.var renderContext= {canvasContext: context,viewport: viewport};page.render(renderContext);})})}showFile.html
<html>
<head>
<meta charset="UTF-8">
<style type="text/css" >#PreviousPage,#nextPage{}</style>
</head>
<body><div id="app"><canvas id="canvas" width=400 height=400></canvas><input style="text-align: center;" id="PreviousPage" type="button" value="上一页" ><input style="text-align: center;" id="nextPage" type="button" value="下一页" ></div></body>
<!--
<script src="https://cdn.bootcss.com/pdf.js/1.9.450/pdf.combined.js">
//有外网直接使用此网站的
</script>
-->
<script src="./pdf.js"></script><script src="./jquery.js"></script><script src="./v1.9.1/jquery.min.js"></script><script src="./displa.js"></script><script src="./datas.js"></script>
<script>
/*write by wt 20200312
*/var lop=1;$(function(){dPlay(lop);$('#nextPage').click(function () {debugger;if(totalPg===lop)return;lop++;dPlay(lop);});$('#PreviousPage').click(function () {debugger;if(lop<=1)return;lop--;dPlay(lop);});})</script>
</html>
链接：https://pan.baidu.com/s/1ggP_azFWsqvyqaJO3ObyVQ
提取码：e5ui
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！