前后分离 使用pdf.js 在线预览

---

一、所需资料

官网下载源码：https://mozilla.github.io/pdf.js

二、使用步骤

1.引入库

将下载的文件放置后端的 静态文件夹下面 如图所示

2.后端文件流

代码如下（示例）：

	@GetMapping(value = "/preview")
	public void pdfStreamHandler(String fileName,HttpServletRequest request,HttpServletResponse response) {
		
		String filePath = productUrl + File.separator + fileName;
		System.out.println(filePath);
		File file = new File(filePath);
		if (file.exists()) {
			byte[] data = null;
			try {
				FileInputStream input = new FileInputStream(file);
				data = new byte[input.available()];
				input.read(data);
				response.getOutputStream().write(data);
				input.close();
			} catch (Exception e) {
				System.out.println("pdf文件处理异常：" + e);
			}

		} else {
			return;
		}
	}

2.前端获取文件流

代码如下（示例）：

<template>
    <div class="page-one">
        <p>pdf.js demo</p>
        <!--服务器-->
        <div style="margin-top: 30px">
            <p>服务器</p>
            <button @click="checkSuccess">查看pdf</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'page-one',
        components: {},
        data() {
            return {
                fileName:'测试.pdf',
            }
        },
        methods: {
            checkSuccess() {

                /**
                 * 后台返回流的形式
                 * 注意事项
                 * 1.访问文件流的路径必须要用 encodeURIComponent() 转码
                 * 2.如果后台有过滤器 要放开获取静态文件的目录 例如 /generic
                 *
                 */
                let url="http://192.168.1.57:8181/sys/common/preview?fileName="+this.fileName+"&access_token=ea19dc0de8801b389ed5099a2297161d";
                window.open("http://192.168.1.57:8181/generic/web/viewer.html?file="+ encodeURIComponent(url));
            },
        }
    }
</script>


<style scoped>
    .page-one button {
        margin-left: 10px;
    }
</style>

总结

以上就是pdf在网页和手机端进行pdf预览
注意： 1.访问文件流的路径必须要用 encodeURIComponent() 转码
2.如果后台有过滤器 要放开获取静态文件的目录
访问路径不加encodeURIComponent 转码会出现传参为空