精华内容
下载资源
问答
  • PDF 预览

    2018-08-03 10:25:31
    PDF 预览 最近写了个pdf文件预览,很多插件,最终选了pdf.js,简单。下面是一个极其简单的demo <html> <head> <meta http-equiv="Content-Type" content="...

    PDF 预览

    最近写了个pdf文件预览,很多插件,最终选了pdf.js,简单。下面是一个极其简单的demo

    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
        <title>Document</title>
        <style type="text/css">
            .lightbox {
                position: fixed;
                top: 0px;
                left: 0px;
                height: 100%;
                width: 100%;
                z-index: 7;
                opacity: 0.3;
                display: block;
                background-color: rgb(0, 0, 0);
            }
    
            .pop {
                position: absolute;
                left: 50%;
                width: 894px;
                margin-left: -447px;
                z-index: 9;
            }
    
            .pageBox {
                position: absolute;
                left: 20%;
                z-index: 10;
                color: red;
            }
        </style>
    
    </head>
    <body>
    <button onclick="pdfView.importPDF('./public/Lorem.pdf')">来啊,点我啊,点我直接展示</button>
    
    <div class="pageBox">
        <button class="" id="prev" onclick="pdfView.toPrevPage()">上一页</button>
        <button class="" id="next" onclick="pdfView.toNextPage()">下一页</button>
    </div>
    <div class="page_count" id="page_count"></div>
    
    
    <div id="container" style="display: none;">
        <div class="lightbox"></div>
        <div id="pop" class="pop">
            <canvas id="the-canvas"></canvas>
        </div>
    </div>
    
    </body>
    <script src="./public/pdf.js"></script>
    <script type="text/javascript">
    
    
        class PDFView{
            constructor(num){
                this.pageNum = num;
                this.workUrl = './public/pdf.worker.min.js';
                this.PDFobj = null;
            }
            chooseFile(me){
                let vm = this;
                console.log(me.files);
                console.log(me.value);
                vm.importPDF(me.value);
            }
            importPDF(pdfUrl){
                let vm = this;
                let container = document.getElementById("container");
                container.style.display = "block";
                let url = pdfUrl;
                PDFJS.workerSrc = vm.workUrl;
                PDFJS.getDocument(url).promise.then((pdf) => {
                    vm.pageTatol = pdf.numPages;
                    document.getElementById('page_count').textContent = pdf.numPages;
                    vm.PDFobj = pdf;
                    vm.showPDF();
                }).catch((err) => {
                    console.log(err);
                })
            }
            showPDF(){
                let vm = this;
                vm.PDFobj.getPage(vm.pageNum).then((page) => {
                    let scale = 1.5;
                    let viewport = page.getViewport(scale);
    
                    let canvas = document.getElementById('the-canvas');
                    let context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
    
                    let renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    page.render(renderContext);
                });
            }
            toPrevPage(){
                let vm = this;
                if (vm.pageNum <= 1) {
                    alert('不要再点了,已经是第一夜了��');
                    return;
                }
                vm.pageNum--;
                vm.showPDF();
            }
            toNextPage(){
                let vm = this;
                if (vm.pageNum >= vm.pageTatol) {
                    alert('不要再点了,已经是最后一夜了��');
                    return;
                }
                vm.pageNum++;
                vm.showPDF();
            }
        }
        var url = './public/lalala.pdf';
    
        /*
        *   引用方式
        *   var pdfView = new PDFView(1,url,workerSrc);
        *   @{param,param}   初始页,pdf文件路径
        *
        *   pdfView.importPDF()   加载pdf并展示
        *
        *   pdfView.toPrevPage()  上一页
        *   pdfView.toNextPage()  下一页
        *
        * */
        var pdfView = new PDFView(1);
    
    
    </script>
    </html>
    

    源码包在这里 https://download.csdn.net/download/qq_37261367/10560372

    本文纯手打,有不当之处请留言!如果对小伙伴们有帮助的话,点赞啊,谢谢!

    展开全文
  • pdf预览

    2020-04-13 13:45:01
    首先下载pdf.js插件,放到项目里面 官网下载地址:http://mozilla.github.io/pdf.js/getting_started/#download 在页面引入pdf.js,然后进行下图操作 ...预览</button> <script src="~/Scripts/jquer...

    首先下载pdf.js插件,放到项目里面

    官网下载地址:http://mozilla.github.io/pdf.js/getting_started/#download

     

     在页面引入pdf.js,然后进行下图操作

    <button onclick="prepdf()">预览</button>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Content/pdf/build/pdf.js"></script>
    
    <script>
        function prepdf() {
    
            var file = "/Content/测试.pdf"
            window.open("/Content/pdf/web/viewer.html?file=" + file);
    
        }
    </script>

     效果如下:

    展开全文
  • PDF预览

    2019-05-31 16:54:10
    这是后台解决 但是只能查看pdf @RequestMapping("/showPdf") public void showPdf(HttpServletRequest request, HttpServletResponse response, HttpSession session) { response.setContentType("application/pdf...

    方法1 这是后台解决 但是只能查看pdf

    @RequestMapping("/showPdf")
    	public void showPdf(HttpServletRequest request, HttpServletResponse response, HttpSession session) {
    	response.setContentType("application/pdf");
    	FileInputStream in;
         OutputStream out;
    	try {
    		in = new FileInputStream(new File(GlobalSetting.get(GlobalSettingNames.MEANS_URL_JCZL) + File.separator + request.getParameter("filename")));
    		
    		out = response.getOutputStream();
    		byte[] b = new byte[512];
    		while ((in.read(b)) != -1) {
    		out.write(b);
    		}
    		out.flush();
    		in.close();
    		out.close();
    	} catch (Exception e) {
    		e.printStackTrace(); 
    	}
    	}
    

    方法2 还有tomcat下server.xml配置 路径映射解决 (前端解决)

    	<Context docBase="C:/data" path="/data" reloadable="true" />
    

    把C:/data/menas/jc/xxx.doc路径映射成 localhost:8080/data/menas/jc/xxx.doc

    展开全文
  • pdf 预览

    千次阅读 2013-12-25 21:40:04
    因为某些原因寻找网页浏览pdf的需求,在国外看了下, 找了几个这里mark下 ...这个也可以预览,但是不如上面的好 http://pdfobject.com/ //可以打开我的福昕阅读器打开pdf,支持的ie7 http://jquery.malsup

    因为某些原因寻找网页浏览pdf的需求,在国外看了下,

    找了几个这里mark下



    //火狐,谷歌,ie9以上都是可以,html技术用户火狐的底层

    http://viewerjs.org/


    这个也可以预览,但是不如上面的好

    http://pdfobject.com/

    //可以打开我的福昕阅读器打开pdf,支持的ie7

    http://jquery.malsup.com/media/misc.html

    展开全文
  • 在线pdf预览插件pdfobject.js设置参数使用pdf预览
  • vue-pdf预览分页版

    2021-06-02 15:44:10
    pdf预览
  • java实现pdf预览

    2018-05-27 08:32:04
    java实现pdf预览 java实现pdf预览 java实现pdf预览 java实现pdf预览
  • 实现pdf预览demo

    2018-05-27 08:26:21
    实现pdf预览demo 实现pdf预览demo 实现pdf预览demo 实现pdf预览demo
  • pdf.js pdf预览插件

    2018-09-14 17:15:51
    html实现pdf预览插件,小程序web-view的pdf预览解决方法
  • ctcesims实现pdf预览demo

    2018-05-27 08:23:04
    ctcesims实现pdf预览demo ctcesims实现pdf预览demo ctcesims实现pdf预览demo
  • 在线pdf预览插件pdfobject.js设置参数使用pdf预览器打印下载
  • 前端pdf预览插件pdfJS

    2021-05-28 16:06:45
    适用于前端pdf预览,低版本支持ie,最新版本不支持低版本ie
  • iframe标签实现pdf预览功能
  • PDF预览 (引入pdf.js)-附件资源
  • 移动端pdf预览

    2020-06-30 15:53:23
    移动端pdf预览功能 最近开发移动端项目,项目中有预览pdf功能,pc端与iOS可正常预览,但安卓不可以直接预览,需要下载。 1、使用到了react-pdf插件,插件地址https://github.com/wojtekmaj/react-pdf 2、 import ...
  • pdfh5.js移动端pdf预览

    2020-04-14 14:05:23
    pdf预览,移动端h5页面实现pdf预览功能。结合pdf.js、pdf.worker.js一起使用。
  • office转pdf预览

    2014-08-05 08:32:43
    office转pdf预览
  • java pdf预览

    2021-05-11 14:24:27
    @GetMapping("previewPDF") public void previewPDF(HttpServletResponse response){ log.info("双非pdf预览 | UnlistedPageDataController.previewPDF | 任务开始,"); ClassPathResource resource = ne
  • canvas 移动端画板批注pdf预览 用了get请求pdf文件,服务器下运行才会生效 画板移动端下才生效
  • react pdf预览

    千次阅读 2019-05-10 15:46:22
    pdf预览很强大的插件是pdf.js,这是原生js实现的插件,能兼容大部分浏览器,对于它的使用方法,在传统的web项目中就是viewer.html?file="文件名称",但是对于react项目来说,pdf.js的文件要放在静态文件夹下,文件较...
  • PDF预览工具,pdfjs,web在线预览pdf的工具 PDF预览工具,pdfjs,web在线预览pdf的工具 PDF预览工具,pdfjs,web在线预览pdf的工具
  • 主要为大家详细介绍了Android实现PDF预览打印功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • mvc实现文件上传,在线PDF预览文件显现。
  • org-inline-pdf.el:Org的内联PDF预览

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,154
精华内容 2,861
关键字:

pdf预览