精华内容
下载资源
问答
  • 前端预览pdf:PDFJS

    2020-09-09 18:00:20
    前端预览pdf **1.iframe** **2.embed** **3.object** **4.pdfjs** 第一种方式:使用viewer.html,以读取文件流方式在线展示pdf文件 第二种方式:将PDF文件渲染成Canvas 问题:IE浏览器,在没有安装pdf阅读器的时候,...

    问题:IE浏览器,在没有安装pdf阅读器的时候,embed,iframe,object标签内嵌pdf时,不能显示。
    html内嵌pdf的方法:

    1.iframe

    闭合标签。
    指定src为要显示的pdf,此外可以把需要的文本放置在 < iframe > 和 < /iframe>之间,这样就可以应对无法理解 iframe 的浏览器。

    <iframe src="/index.pdf" width="100%" height="100%">
     
    This browser does not support PDFs. Please download the PDF to view it: <a href="/index.pdf">Download PDF</a>
     
    </iframe>
    

    2.embed

    非闭合标签
    但是需要注意的是这个标签不能提供回退方案,与< iframe > < / iframe > 不同,这个标签是自闭合的,也就是说如果浏览器不支持PDF的嵌入,那么这个标签的内容什么都看不到。

    <embed src="/index.pdf" type="application/pdf" width="100%" height="100%">
    

    3.object

    定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。 标签用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。

    如果未显示 object 元素,就会执行之间的代码。通过这种方式,我们能够嵌套多个 object 元素(每个对应一个浏览器)。和iframe很像,支持回退。

    <object data="/index.php" type="application/pdf" width="100%" height="100%">
     
    This browser does not support PDFs. Please download the PDF to view it: <a href="/index.pdf">Download PDF</a>
     
    </object>
    

    4.pdfjs

    针对没有安装pdf阅读器,IE下不能显示的问题,可以使用pdfjs插件。
    pdfjs插件还有一个作用就是统一pdf显示的格式,因为各个浏览器显示pdf的格式不一样。

    PDF.js: http://mozilla.github.io/pdf.js/

    实现pdf预览主要有两种方式:
    1、使用pdfjs已经写好的viewer.html页面。需要将pdfjs代码放到服务器上,因为放到本地包有点大。
    2、将PDF文件渲染成Canvas。

    第一种方式:使用viewer.html,以读取文件流方式在线展示pdf文件

    官网下载地址:https://mozilla.github.io/pdf.js/getting_started/#download
    下载Prebuilt版,我用的是es5的。下载的包里有build和web两个目录。
    在这里插入图片描述

    <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta name=referrer content=never>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
        <meta name="renderer" content="webkit">
    </head>
    <style type="text/css">
    	#content{
    		width:1000px;
    		height:550px;
    	}
    </style>
    <body>
    <div id="content"></div>
    </body>
    <script>
        window.onload=function() {
    		var pdf = 'index.pdf';
    		var iframe = document.createElement("iframe");
    		iframe.setAttribute("src","./web/viewer.html?file=" +encodeURIComponent(pdf));
    		//iframe.setAttribute("src","<c:url value='/web/viewer.html' />?file=<c:url value='l505-0009-06-zh-cn.pdf' />
    		iframe.setAttribute('width','100%');
    		iframe.setAttribute('height','100%');
    		document.getElementById("content").appendChild(iframe);		
        }
    </script>
    </html>
    

    *需要通过http去访问ie,本地不能打开
    *pdf文件需要放到web目录下

    第二种方式:将PDF文件渲染成Canvas

    需要引入pdf.js和pdf.worker.js,且pdf.js里要有PDFJS对象。
    因为我用最新的包好像没有导出PDFJS对象。

    <!DOCTYPE html>
    <html>
        <head>
            <title>Show PDF</title>
            <meta charset="utf-8"/>
            <script type="text/javascript" src='pdf.js'></script>
            <style type="text/css">
                html,body {
                    width: 100%;
                    margin: 0;
                    padding: 0;
                    background-color: #444;
                }
    
                body {
                    display: flex;
                    justify-content: center;
                    flex-wrap: wrap;
                }
    			#content{
    				width:1000px;
    				height:550px;
    			}
            </style>
        </head>
        <body>
    		<div id="content">
            </div>
    	</body>
        <script type="text/javascript">
            
            
    	PDFJS.getDocument('./l505-0009-06-zh-cn.pdf').then(pdf=>{
    		var numPages = pdf.numPages;
    		var start = 1;
    		renderPageAsync(pdf, numPages, start);
    	});
    	
    	async function renderPageAsync(pdf, numPages, current){
    		for(let i=1; i<=numPages; i++){
    			// page
    			let page = await pdf.getPage(i);
    			
          		let scale = 1.5;
          		let viewport = page.getViewport(scale);
          		// Prepare canvas using PDF page dimensions.
          		let canvas = document.createElement("canvas");
          		let context = canvas.getContext('2d');
          		//document.body.appendChild(canvas);
    			//document.getElementById("content").appendChild(canvas);
    			document.body.appendChild(canvas);
          		
          		canvas.height = viewport.height;
          		canvas.width = viewport.width;
    
          		// Render PDF page into canvas context.
          		let renderContext = {
            			canvasContext: context,
            			viewport: viewport
          		};
          		page.render(renderContext);
    		}
    	}
    
        
        </script>
    </html>
    

    *这种方法用canvas来显示pdf,是把pdf当成一个图片,pdf内容里面的链接就失效了。而且不能把它放到固定大小的div里,否则只能显示div的高度的pdf内容。

    方法一符合我的要求。

    tip:没有使用<c:url>标签之前必须使用文档相对路径或是绝对路径对目标资源进行定位,如果使用根相对路径就会发生错误,具体详见J2EE中的绝对路径&根相对路径&文档相对路径 问题注意,但是在使用<c:url>标签的时候就可以以Web应用的根目录为参考点出发进行资源的定位,即根相对路径的使用.

    参考:https://blog.csdn.net/qappleh/article/details/80250492

    展开全文
  • 一款解决pdf预览下载打印的集成插件,可以自行参考官网教程,官网下载的太慢了,git也拉不下来
  • 1.在目录中引入pdf.js 2. 然后从script中引入文件的路径 3.引入成功后,可以直接在ts文件中使用pdfjs的方法,在全局中声明pdfview: declare var pdfview: any; 然后创建pdfview对象: this.pdfv = new ...

    1.在目录中引入pdf.js

    2. 然后从script中引入文件的路径

    3.引入成功后,可以直接在ts文件中使用pdfjs的方法,在全局中声明pdfview:

            declare var pdfview: any;

       然后创建pdfview对象:

    this.pdfv = new pdfview({

    path: 'assets/js/pdfjs/',

    filemain: '.PDFViewShow',

    });

    filemain对应的你在html页面中展示的div的class名称

     4.初始化完成pdfjs后,点击文件获取文件的信息,调取后台服务获取文件流

    5 前端html页面如下:

     

     

    展开全文
  • 支持ie什么的、浏览远程pdf文档,在线预览
  • 1. 解压 PDF前端预览功能.zip 压缩包,复制到网站开发目录; 2. 调用方式:window.open("Scripts/lib/PDF/web/viewer.html?file=" + window.location.protocol + "//" + window.location.host + "/test.pdf"); 3....
  • 公司的人力资源管理系统有个需求,预览PDF和Word合同,之前做过PDF预览【JQ和原生JS版html页面展示PDF文件】的功能,也用微软的网页版预览过,但是 微软的那个不支持 PDF 也是醉了。 经多方探查,找到一个即支持 PDF...

    前言

    公司的人力资源管理系统有个需求,预览PDFWord合同,之前做过PDF预览【JQ和原生JS版html页面展示PDF文件】的功能,也用微软的网页版预览过,但是 微软的那个不支持 PDF 也是醉了。

    XDOC 云预览

    经多方探查,找到了一个即支持 PDF 的,也支持 Word 的,并且支持 Excel 的
    在这里插入图片描述
    用起来也简单:使用方法地址http://view.xdocin.com/

    window.open("https://view.xdocin.com/xdoc?_xdoc=" + encodeURIComponent("https://view.xdocin.com/doc/preview.docx"));
    

    在这里插入图片描述
    不需要安装任何的插件

    XDOC 预览失败

    经测试,排除地址解析错误(路径有误)问题外,后端人员使用 PHPExcel 代码生成的 .xls 文件(Excel),使用 XDOC 打不开,可能生成的文件在配置里边少了某些东西吧(头或者格式或者编码什么的),总之,后端代码生成的 Excel 表格打不开,估计 生成的 Word 也可能有问题这里没做测试。

    但是使用微软的预览可以打开后端代码生成的 Excel 。

    最终建议 PASS 掉 XDOC -.-!!!

    这里建议,非 PDF 的使用 微软 的预览,由于 微软 的预览不支持 PDF 格式,所以如果是 PDF 格式的可以使用 XDOC 或者 pdf.js 预览。

    JS 判断文件类型:

    let url = '***.pdf' // '***.word' '***.xls'
    if(url.endsWith('.pdf')){ // PDF 预览
    
    } else { // 微软或者其它的预览方式
    
    }
    

    PDF.JS 预览方式

    点击查看 pdf.js 预览例子

    VUE 项目预览

    别人写好的,我就直接放这儿了,需要的自行查看得了 npm vue-pdf 文档
    vue-pdf实现pdf文件在线预览 DEMO

    微软的预览方式:

    window.open("http://view.officeapps.live.com/op/view.aspx?src=" + encodeURIComponent("https://www.***.com/upload_files/编号12的.xls"));
    

    微软的所有文档地址:中文 || 英文

    至于这个预览的文档地址,已经 404 了,广为流传的只有使用方式,见下方:

    Office 官方 2013 年提供的 Office Web Viewer 详细文档,现在是 404:https://blogs.office.com/2013/04/10/office-web-viewer-view-office-documents-in-a-browser/

    2021/04/15更换方案

    查看新方案

    更换原因:

    XDOC 云预览 提示 *** 域名 合作到期,请联系 *** 
    可能是希望联系一下看怎么收费的问题或者是怎么合作的问题吧,引流或者植入广告等等,
    也不清楚,反正一看这个东西就烦,所以重新修改了方案
    
    想着用微软的 http://view.officeapps.live.com/op/view.aspx?src= url 和 pdf.js 整合,自己写一个全局的组件
    但是,经验证发现,微软的这个对 doc 的文件预览有问题,具体什么问题也不研究了,研究了也没法改。
    
    之后再次调研,于是就有了这个新的方案。
    

    各位小伙伴支持一下博主吧,花呗都还不起了 555!!!

    1:打开支付宝扫一扫,扫码领红包
    2:领多少红包直接扫码支付输入多少就行,最后是0.00,小编不要多余的一分钱 (ø_ø)
    (*  ̄3)(ε ̄ *)
    展开全文
  • 前端预览PDF总结

    2019-12-12 16:35:08
    前端预览PDF总结: 要在网页上显示PDF文件,首先< object >、< embed >、< iframe >这几个标签就能实现PDF文件的预览(无需JavaScript支持),我还在网上看了下发现挺多第三方js库可以实现PDF预览...

    前端预览PDF总结

    原文链接:https://blog.csdn.net/qappleh/article/details/80250492
    要在网页上显示PDF文件,首先< object >、< embed >、< iframe >这几个标签就能实现PDF文件的预览(无需JavaScript支持),我还在网上看了下发现挺多第三方js库可以实现PDF预览,如jQuery Document Viewer、jquery.media.js、PDFObject、PDF.js等等。我大概看了下PDFObject、PDF.js这两个库,前者并不是一个PDF的渲染工具,而是通过使用< embed >标签来显示PDF;后者则会解析PDF文件内容,还能将PDF渲染成Canvas。

    < iframe >

    所有浏览器都支持 < iframe > 标签,直接将src设置为指定的PDF文件就可以预览了。此外可以把需要的文本放置在 < iframe > 和 之间,这样就可以应对无法理解 iframe 的浏览器,比如下面的代码可以提供一个PDF的下载链接:

    This browser does not support PDFs. Please download the PDF to view it: Download PDF

    < embed > 标签定义嵌入的内容,比如插件。在HTML5中这个标签有4个属性:

    属性 值 描述
    height pixels 设置嵌入内容的高度。
    width pixels 设置嵌入内容的宽度。
    type type 定义嵌入内容的类型。
    src url 嵌入内容的 URL。
    但是需要注意的是这个标签不能提供回退方案,与< iframe > < / iframe >
    不同,这个标签是自闭合的的,也就是说如果浏览器不支持PDF的嵌入,那么这个标签的内容什么都看不到。用法如下:

    < object >

    < object >定义一个嵌入的对象,请使用此元素向页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数,以及可用来显示和操作数据的代码。用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。几乎所有主流浏览器都拥有部分对 < object > 标签的支持。这个标签在这里的用法和< iframe >很小,也支持回退:

    This browser does not support PDFs. Please download the PDF to view it: Download PDF

    当然,结合< object >和< iframe >能提供一个更强大的回退方案:

    This browser does not support PDFs. Please download the PDF to view it: Download PDF

    以上三个标签是一种无需JavaScript支持的PDF预览方案。 ———————————————— 版权声明:本文为CSDN博主「ruanhongbiao」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    展开全文
  • 前端预览PDF总结:iframe、embed、PDFObject、PDF.js

    万次阅读 多人点赞 2018-05-09 11:14:17
    这几个标签就能实现PDF文件的预览(无需JavaScript支持),我还在网上看了下发现挺多第三方js库可以实现PDF预览,如jQuery Document Viewer、jquery.media.js、PDFObject、PDF.js等等。我大概看了下PDFObject...
  • 关于vue实现前端预览PDF文件几种情况方法1方法2方法3总结 几种情况 经过两天的踩坑。总结出以下几点 预览pdf分别有。预览本地pdf文件、预览服务端PDF文件、以及预览osspdf文件。 我又分别尝试了几种方法。这个重点...
  • 前端预览 PDF 和图片文件,绝对好用! Talk is cheap, show me the code 前提 文件需转为 base64 格式,可以使用 FileReader 的 readAsDataURL() 方法,这里不细述 预览 PDF fetch(base64str) .then((res) =>...
  • 前端在线预览PDF文件

    2021-10-10 16:58:15
    如何在vue项目中预览PDF格式的文件 需求:在vue3.x项目中预览pdf文件 提供以下三种方案: 1.Vue-pdf:适用于vue2.x版本,vue3.x需要改一些源码(vue2.x项目极力推荐,vue3.x需要斟酌) 2.Pdf.js:该插件推荐通过其中...
  • 1.PDF的在线预览:1)ios系统中PDF可以提示下载,然后点击下载,使用本机上支持pdf的应用打开;2)Android系统中显示补充来插件,内容及提示下载的内容;兼容的做法就是,pdf类型的文件,只显示下载功能,让用户自行...
  • 前端pdf预览插件pdfJS

    2021-05-28 16:06:45
    适用于前端pdf预览,低版本支持ie,最新版本不支持低版本ie
  • 前端用pdfjs实现预览PDF

    千次阅读 2020-11-21 19:39:00
    最近做项目,产品经理要求实现预览PDF,最起初是采用iframe标签,把服务器返回的一个可预览的链接扔到iframe标签的src中,就实现预览了,但是这种实现有一个弊端,就是预览出来的pdf是可以选中并且复制的,但是产品...
  • 1. 后台返回文件 ...2,前端代码 getSubmissions(data, { responseType: 'arraybuffer' }).then(res => { this.wordResData = res; var reg = /^['|"](.*)['|"]$/; const data = res.data; ...
  • 前端使用pdf.js预览pdf文件

    千次阅读 2019-08-14 09:42:47
    如果我们想在网页上统一预览pdf怎样实现呢? Mozilla开源了一个插件pdf.js,无需任何本地支持就可以在浏览器上显示pdf文档。唯一的要求就是浏览器必须支持HTML5。使用方法: 下载...
  • 前端预览PDF:PDFObject、PDF.js

    万次阅读 热门讨论 2017-09-03 16:53:40
    object、embed、iframe这几个标签能实现PDF文件的预览(无需JavaScript支持),但是都受限于浏览器的支持。PDFObject是一个通过embed标签实现PDF预览的js库,速度较快。对于不支持PDF预览的浏览器则可以通过PDF.js来...
  • vue-pdf教程 前端pdf文件预览 fdf文件流预览
  • pdf预览,ie中pdf预览,下载,打印;浏览器中预览pdf,支持ie,基于pdf.js开发的demo,下载即用。
  • vue+ts+elementUI:后端返回文件流,前端预览pdf文件 1.配置接口 //获取pdf文件流 export const getPdfService = (paramsData: any) => { const res: any = service.post('/idsapi/api/dispatch/dispatch_file_...
  • } </style> </style> </head> <body> <div id="my-map"> 权威教程.pdf" width="800px" height="500px" /> </div> 权威教程.pdf" type="application/pdf" width="800" height="500"> 权威教程.pdf">test.pdf</a> ...
  • 后端: public void qryPdfInfo(HttpServletResponse response) { // 实例化对象 HttpClient client = new HttpClient(); GetMethod get = null; OutputStream output = ... xhr.send() 前端页面: 在页面中加入pdf标签
  • 前端通过url预览pdf文件

    千次阅读 2019-08-27 13:11:14
    项目中需要通过链接来预览pdf,代码如下: <a href="webpath/down/previewUrl.page?id=web_path/down/previewUrl.page?id=webp​ath/down/previewUrl.page?id=!orderDetail.insurePolicyNo" target=“view_...
  • 前端实现pdf预览

    千次阅读 2018-07-17 14:40:16
    引入pdf预览插件:&lt;script type="text/javascript" src="jquery.media.js"&gt;&lt;/script&gt; &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt;...
  • 前端-在线预览pdf、word、xls、ppt等文件

    万次阅读 多人点赞 2018-05-17 16:58:06
    在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览 <a href="文档地址"></a> 方式二: 通过jquery插件jquery.media.js实现 这个插件可以实现pdf预览功...
  • vue项目前端预览pdf、doc、xls

    千次阅读 2020-04-24 14:38:15
    预览pdf、doc、xlsoffice online私人文档预览云服务pdfdocxls office online 微软office平台提供的文档预览服务 https://view.officeapps.live.com/op/view.aspx?src+文档地址 文档地址必须是域名80端口且公开访问 ...
  • 前端vue实现PDF预览

    2021-08-14 16:20:13
    一、使用a标签 <...pdf<...点击链接在新窗口打开预览PDF文件,和使用浏览器输入文件地址打开文件一样。 二、使用iframe标签 <div class="iframe-pdf"> <iframe src="http://xxx.xx.c
  • 使用iframe嵌套进行预览 frameborder="0" scrolling="auto" :src="imageUrl" type="application/x-google-chrome-pdf" width="100%" height="622px" /> 注意:iframe一定要设置高度 此方法不兼容ie
  • pdf.js使用文件流预览pdf

    千次下载 热门讨论 2015-09-27 23:16:40
    网上大部分pdf.js都是用url方式预览pdf,此处给出pdf.js使用文件流预览pdf的Web工程; 此是maven工程; 100%能运行;
  • 前端pdf流的形式预览

    千次阅读 2020-05-25 16:49:41
    方式一 http://xxx.xx.com/pdf.pdf 形式 找好插件,或者直接iframe加载就行了 方式二 通过文件流的形式 下载 pdf.js https://mozilla.github.io/pdf.js/getting_started/#download 解压完之后会有两个文件夹一个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,359
精华内容 2,143
关键字:

前端预览pdf