使用PDF.JS在线预览PDF文件

时间：2024-03-24 18:30:43

      最近项目用到PDF文件在线预览功能，博主在网上搜寻一番决定使用PDF.js插件。首先需要引入插件库，根据个人所需下载版本，博主使用的是v1.9.426版本。

PDF.js插件下载地址：http://mozilla.github.io/pdf.js/

1、博主使用的是spring-boot项目，其他的也类似。引入文件后目录结构如下：

使用PDF.JS在线预览PDF文件

2、index.html内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    function detail() {
        window.open("/js/web/viewer.html?file=/preview");
    }
</script>
<body>
<h1 onclick="detail()">点击查看PDF文件</h1>
</body>
</html>

说明一下：要在线预览PDF文件，需要使用自带的viewer.html显示。PDF文件的读取可以放到后台。

3、DemoController.java文件内容如下：

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;

@Controller
public class DemoController {
    @RequestMapping("/index")
    public String index(){
        return "index";
    }
    @RequestMapping(value = "/preview", method = RequestMethod.GET)
    public void pdfStreamHandler(HttpServletRequest request, HttpServletResponse response) {

        File file = new File("c:/test.pdf");
        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;
        }
    }
}

4、启动DemoApplication。

5、访问localhost:8080/index

使用PDF.JS在线预览PDF文件

6、点击文字。

使用PDF.JS在线预览PDF文件

7、OK，预览成功。

下面说博主遇到的问题。

问题一：怎么隐藏右上角的打印、下载功能。

1、首先需要在viewer.properties文件中搜索“下载”。找到对应的英文名

使用PDF.JS在线预览PDF文件2、然后在viewer.html文件中搜索下载对应的英文download_label，此时会找到两个对应的button。都关闭或者关闭如下的都有效果。

<button id="download" class="toolbarButton download hiddenMediumView" title="Download" tabindex="34" data-l10n-id="download">
  <span data-l10n-id="download_label">Download</span>
</button>

3、在button中加入style样式隐藏按钮 ，代码   style="visibility:hidden"。加入后代码如下

<button id="download" class="toolbarButton download hiddenMediumView" title="Download" tabindex="34" data-l10n-id="download" style="visibility:hidden">
  <span data-l10n-id="download_label">Download</span>
</button>

4、再次访问对比

不加代码前，右上角会有下载按钮

使用PDF.JS在线预览PDF文件

加入代码后，右上角下载按钮隐藏。

使用PDF.JS在线预览PDF文件

5、隐藏完成。打印功能类同。

相关文章