web用pdfobject 对pdf 预览文件

最新推荐文章于 2024-07-29 14:22:26 发布

JavaTestZhangy

最新推荐文章于 2024-07-29 14:22:26 发布

阅读量1k

点赞数

文章标签： java html

本文链接：https://blog.csdn.net/qq_23490959/article/details/121406299

版权

网上找了很多

1.jquery.media 我只找到地址指向一个具体pdf文件，没有找到返回文件流的处理，所以pass掉
2.pdf.js 比较专业，但是真的太复杂了 pass

pdfobject 这支持指引文件，或者返回文件流两种方式，在这比较简单直接上代码

后台

/**
     * 预览pdf文件
     * 返回文件流
     * @param fileName
     */
@RequestMapping(value = "/getViewTest", method = RequestMethod.GET)
public void getViewTest(String fileName, HttpServletRequest request, HttpServletResponse response) {
        File file = new File("D:\\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) {
                logger.error("pdf文件处理异常：" + e.getMessage());
            }
        } else {
            return;
        }
    }
或者
直接是项目理的具体文件
js/demo.pdf

前端页面
引入核心js

文件来源于：
https://unpkg.com/pdfobject@2.2.7/pdfobject.min.js

实例：https://pdfobject.com/examples/embed-multiple-PDFs.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title></title>
    <#include "/head.html">
    <style>
        .pdfobject-container {
            width: 98%;
            max-width: 100%;
            /*height: 600px;*/
            margin: 2em 0;
        }

        /* PDFObject automatically assigns the class name "pdfobject" to the <embed> element */
        .pdfobject {
            border: solid 1px #666;
        }
    </style>

</head>

<body>
<div id="pdf1"></div>
<script src="${path}/js/pdf/pdfobject.min.js"></script>
<script>
<!--接受文件流-->
    PDFObject.embed("fileView/getViewTest", "#pdf1");
<!--直接指向文件-->
	<!--PDFObject.embed("js/demo.pdf", "#pdf1");-->
    FrameWH();
    function FrameWH() {
        var h = $(window).height()*0.9;
        $("#pdf1").css("height", h + "px");
    }
    $(window).resize(function () {
        FrameWH();
    });
</script>
</body>
</html>

在这里插入图片描述
预览效果

JavaTestZhangy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web用pdfobject 对pdf 预览文件

网上找了很多1.jquery.media 我只找到地址指向一个具体pdf文件，没有找到返回文件流的处理，所以pass掉2.pdf.js 比较专业，但是真的太复杂了 passpdfobject 这支持指引文件，或者返回文件流两种方式，在这比较简单直接上代码后台/** * 预览pdf文件 * 返回文件流 * @param fileName */@RequestMapping(value = "/getViewTest", method = RequestM
复制链接

扫一扫