目前各大主流的瀏覽器都支持PDF文件預(yù)覽查看灶轰，故可在HTML頁(yè)面中直接預(yù)覽PDF文件谣沸，常規(guī)有5種方法來(lái)實(shí)現(xiàn)。
一笋颤、A標(biāo)簽
A標(biāo)簽鏈接的常規(guī)用法是點(diǎn)擊鏈接下載到本地電腦乳附，有的瀏覽器中A標(biāo)簽鏈接是可以直接預(yù)覽顯示的，后可在PDF預(yù)覽區(qū)域的工具欄按鈕下載等操作。
? <html>
? ? <head>
? ? ? <title>A PDF</title>
? ? </head>
? ? <body>
? ? ? <a >Download PDF</a>
? ? </body>
? </html>
二赋除、embed標(biāo)簽
embed標(biāo)簽是內(nèi)嵌HTML指定大小區(qū)域里面顯示PDF文件阱缓，后可在PDF預(yù)覽區(qū)域的工具欄按鈕下載等操作。
? <html>
? ? <head>
? ? ? <title>Embed PDF</title>
? ? </head>
? ? <body>
? ? ? <embed src="https://www.mahailushu.com/pdfjs/web/mine.pdf" type="application/pdf" width=1000 height=800>
? ? </body>
? </html>
三贤重、object標(biāo)簽
object標(biāo)簽也是內(nèi)嵌HTML指定大小區(qū)域里面顯示PDF文件茬祷，后可在PDF預(yù)覽區(qū)域的工具欄按鈕下載等操作。
? <html>
? ? <head>
? ? ? <title>Object PDF</title>
? ? </head>
? ? <body>
? ? ? <object data="https://www.mahailushu.com/pdfjs/web/mine.pdf" type="application/pdf" width=1000 height=800>
? ? </body>
? </html>
四并蝗、iframe標(biāo)簽
iframe標(biāo)簽也是內(nèi)嵌HTML指定大小區(qū)域里面顯示PDF文件祭犯，后可在PDF預(yù)覽區(qū)域的工具欄按鈕下載等操作。
? <html>
? ? <head>
? ? ? <title>Object PDF</title>
? ? </head>
? ? <body>
? ? ? <iframe src="https://www.mahailushu.com/pdfjs/web/mine.pdf" width=1000 height=800>
? ? </body>
? </html>
五滚停、pdf.js框架
目前pdf.js框架是最推薦使用的PDF預(yù)覽方式沃粗，它是利用js語(yǔ)言兼容統(tǒng)一地預(yù)覽pdf文件。如果想讓PDF不想下載等操作的話键畴，僅需在view.html中將下載按鈕隱藏或刪除最盅，而前面四種標(biāo)簽方式的下載按鈕就無(wú)法取消；即使有的說(shuō)在鏈接后面添加“#toolbar=0”也是無(wú)效的起惕。
請(qǐng)點(diǎn)擊 這里訪問(wèn)pdf.js框架官網(wǎng)涡贱，如下圖點(diǎn)擊Download下載框架安裝包：
進(jìn)入下載頁(yè)面，如下圖：
下載得到壓縮包惹想，如下圖：
在靜態(tài)網(wǎng)站中以HTML頁(yè)面方式直接訪問(wèn)預(yù)覽PDF文件问词，僅需把上述文件夾復(fù)制與部署到Web應(yīng)用服務(wù)器目錄下，假定其訪問(wèn)鏈接URL為https://www.mahailushu.com/pdfjs/viewer.html嘀粱，那么直接可在瀏覽器中訪問(wèn)激挪，如下地址：
https://www.mahailushu.com/pdfjs/web/viewer.html?file=https://www.mahailushu.com/pdfjs/web/mine.pdf
在瀏覽器中訪問(wèn)，PDF預(yù)覽如下：
大家有沒(méi)有發(fā)現(xiàn)锋叨，頂部都有按鈕操作欄垄分，包括下載、打印等娃磺；如果想要不顯示這些按鈕薄湿，如何操作呢？
如上圖紅框標(biāo)注偷卧，把左右按鈕欄隱藏即可豺瘤。
最后，說(shuō)下如何在Ant Design in React框架中實(shí)現(xiàn)PDF預(yù)覽且不顯示下載等按鈕涯冠，操作過(guò)程如下：
復(fù)制pdfjs目錄到項(xiàng)目的public目錄下
2. 修改viewer.html，隱藏下載等按鈕
3.假定URL地址為https://www.mahailushu.com/pdfjs/web/viewer.html?file=https://www.mahailushu.com/pdfjs/web/mine.pdf逼庞，前者viewer.html和mine.pdf都是在相同域名下蛇更，那上面方法就可以啦。然而，如果這兩個(gè)都域名不一樣的話派任，即跨越訪問(wèn)砸逊，那么，需修改viewer.js文件掌逛，注釋掉跨越限制师逸。
4. 在react頁(yè)面中，以iframe標(biāo)簽嵌入PDF訪問(wèn)地址豆混，即如下：
<iframe src="https://www.mahailushu.com/pdfjs/web/viewer.html?file=https://www.mahailushu.com/pdfjs/web/mine.pdf" width=1000 height=800>
react代碼片段如下：
如此一來(lái)篓像，無(wú)下載等按鈕的PDF預(yù)覽功能需求即做到了。
