【AngularJs】前端使用iframe預(yù)覽pdf文件報(bào)錯(cuò)

1年前作者：smart_dream分類：Toy博客閱讀(16)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了【AngularJs】前端使用iframe預(yù)覽pdf文件報(bào)錯(cuò)。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

<iframe style="width: 100%; height: 100%;" src="{{vm.previewUrl}}"></iframe>

出現(xiàn)報(bào)錯(cuò)信息：Can't interpolate: {{vm.previewUrl}}

【AngularJs】前端使用iframe預(yù)覽pdf文件報(bào)錯(cuò),angular.js,前端,服務(wù)器

在ctrl文件中信任該文件就可以了
vm.trustUrl = $sce.trustAsResourceUrl(vm.previewUrl);//信任該文件?

在html中：
<iframe style="width: 100%; height: 100%;" src="{{vm.trustUrl}}"></iframe>

出現(xiàn)新的報(bào)錯(cuò)信息：Refused to display 'https://XXXXX'?in a frame because it set 'X-Frame-Options' to 'deny'.

【AngularJs】前端使用iframe預(yù)覽pdf文件報(bào)錯(cuò),angular.js,前端,服務(wù)器 ?

X-Frame-Options： HTTP 響應(yīng)頭是用來(lái)給瀏覽器指示允許一個(gè)頁(yè)面可否在<frame>,?<iframe>,?<embed>?或者?<object>?中展現(xiàn)的標(biāo)記。站點(diǎn)可以通過(guò)確保網(wǎng)站沒(méi)有被嵌入到別人的站點(diǎn)里面，從而避免點(diǎn)擊劫持攻擊。
X-Frame-Options 有三個(gè)屬性值：

deny
表示該頁(yè)面不允許在frame中展示，即便是在相同域名的頁(yè)面中嵌套也不允許。

sameorigin
表示該頁(yè)面可以在相同域名頁(yè)面的frame中展示。

allow-from uri
表示該頁(yè)面可以在指定來(lái)源的frame中展示

后端配置后，成功預(yù)覽pdf
【AngularJs】前端使用iframe預(yù)覽pdf文件報(bào)錯(cuò),angular.js,前端,服務(wù)器 ?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-857898.html

到了這里，關(guān)于【AngularJs】前端使用iframe預(yù)覽pdf文件報(bào)錯(cuò)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

前端預(yù)覽pdf文件
在前端開(kāi)發(fā)中，很多時(shí)候我們需要進(jìn)行pdf文件的預(yù)覽操作，下面給出幾種常見(jiàn)的預(yù)覽pdf文件的方法：如果項(xiàng)目對(duì)pdf的預(yù)覽功能要求不高，只是要求能夠看的話，可以直接在瀏覽器上打開(kāi)pdf文件的地址，代碼如下 PDF.js是一個(gè)由Mozilla開(kāi)發(fā)的JavaScript庫(kù)，用于在網(wǎng)頁(yè)上呈現(xiàn)和操作
2024年02月15日
瀏覽(21)
前端如何預(yù)覽pdf文件流
通過(guò)查找資料，可以找到如下幾種方案，其中最為成熟的方案是vue-pdf 1. iframe 既可以用來(lái)瀏覽本地static下的文檔，也可以預(yù)覽后端返回的文件流文檔 2. vue-pdf?較為完善的vue預(yù)覽pdf的方案 3. vueshowpdf?網(wǎng)絡(luò)上找到的一個(gè)他人封裝的pdf組件優(yōu)點(diǎn) 缺點(diǎn) 原理 iframe/object/embed 簡(jiǎn)單易用
2024年02月17日
瀏覽(24)
前端實(shí)現(xiàn)pdf，圖片，word文件預(yù)覽
需求：實(shí)現(xiàn)一個(gè)在線預(yù)覽pdf、excel、word、圖片等文件的功能。介紹：支持pdf、xlsx、docx、jpg、png、jpeg。以下使用Vue3代碼實(shí)現(xiàn)所有功能，建議以下的預(yù)覽文件標(biāo)簽可以在外層包裹一層彈窗。 iframe標(biāo)簽?zāi)軌驅(qū)⒘硪粋€(gè)HTML頁(yè)面嵌入到當(dāng)前頁(yè)面中，我們的圖片也能夠使用iframe標(biāo)簽來(lái)
2024年02月11日
瀏覽(26)
【vue2中的pdf預(yù)覽】iframe/pdf.js/vue-pdf
vue2中預(yù)覽pdf的方法有pdf.js和vue-pdf等。下面進(jìn)行簡(jiǎn)單對(duì)比使用方法的介紹。使用iframe預(yù)覽pdf 如果后端返回的不是url，那么需要使用 responseType = \\\'blob\\\' 來(lái)讀取后端傳來(lái)的內(nèi)容。擴(kuò)展：同樣是使用iframe進(jìn)行預(yù)覽，如果有其他格式如word/xls/ppt/txt的文件需要預(yù)覽，可以使用微軟解
2024年02月09日
瀏覽(75)
前端實(shí)現(xiàn)文件預(yù)覽（pdf、excel、word、圖片）
需求：實(shí)現(xiàn)一個(gè)在線預(yù)覽pdf、excel、word、圖片等文件的功能。介紹：支持pdf、xlsx、docx、jpg、png、jpeg。以下使用Vue3代碼實(shí)現(xiàn)所有功能，建議以下的預(yù)覽文件標(biāo)簽可以在外層包裹一層彈窗。 sandbox 這個(gè)屬性如果是單純預(yù)覽圖片可以不使用，該屬性對(duì)呈現(xiàn)在 iframe 框架中的內(nèi)容
2024年02月10日
瀏覽(49)
前端js打開(kāi)pdf文件--文件通過(guò)瀏覽器打開(kāi)，以pdf形式進(jìn)行預(yù)覽
通過(guò)點(diǎn)擊button按鈕，觸發(fā) @click=\\\"openPDF(performance_report)\\\"方法，把對(duì)應(yīng)需要展示的pdf傳送到openPDF()方法內(nèi)，這里的pdf文件格式必須包括id、name、url。在這里，performance_report為預(yù)覽的文件：
2024年02月14日
瀏覽(35)
vue前端預(yù)覽pdf并加水印、ofd文件，控制打印、下載、另存，vue-pdf的使用方法以及在開(kāi)發(fā)中所踩過(guò)的坑合集
根據(jù)公司的實(shí)際項(xiàng)目需求，要求實(shí)現(xiàn)對(duì)pdf和ofd文件的預(yù)覽，并且需要限制用戶是否可以下載、打印、另存pdf、ofd文件，如果該用戶可以打印、下載需要控制每個(gè)用戶的下載次數(shù)以及可打印的次數(shù)。正常的預(yù)覽pdf很簡(jiǎn)單，直接調(diào)用瀏覽器的預(yù)覽就可以而且功能也比較全，但是一
2024年02月16日
瀏覽(93)
記錄--前端實(shí)現(xiàn)文件預(yù)覽（pdf、excel、word、圖片）
需求：實(shí)現(xiàn)一個(gè)在線預(yù)覽pdf、excel、word、圖片等文件的功能。介紹：支持pdf、xlsx、docx、jpg、png、jpeg。以下使用Vue3代碼實(shí)現(xiàn)所有功能，建議以下的預(yù)覽文件標(biāo)簽可以在外層包裹一層彈窗。 iframe標(biāo)簽?zāi)軌驅(qū)⒘硪粋€(gè)HTML頁(yè)面嵌入到當(dāng)前頁(yè)面中，我們的圖片也能夠使用iframe標(biāo)簽來(lái)
2024年02月09日
瀏覽(42)
vue 純前端預(yù)覽pdf，純前端實(shí)現(xiàn)pdf加水印下載文件也帶水印，防止pdf下載
? 原理：主要是利用pdfh5這個(gè)插件來(lái)完成的 ? 使用方法： ? 1.頁(yè)面需要有一個(gè)容器例子：div id=\\\"demo\\\"/div ? 2.下載pdfh5插件 npm install pdfh5 ? (注意：webpack5之后不會(huì)下載polyfill 需要手動(dòng)下載所以引入pdfh5的時(shí)候會(huì)報(bào)錯(cuò)) ? 解決方案：下載 node-polyfill-webpack-plugin npm install node-polyfill-
2024年04月15日
瀏覽(129)
純前端實(shí)現(xiàn)文件預(yù)覽（pdf、docx 、xlsx）詳細(xì)過(guò)程
我詳細(xì)這個(gè)當(dāng)這個(gè)需求來(lái)的時(shí)候，有很大一部分人跟我的想法是一樣的純前端如何去實(shí)現(xiàn)多文件預(yù)覽。確實(shí)這個(gè)功能很讓人頭疼，雖然市面上也有很多成型的插件，但是極少數(shù)能滿足不同文件的預(yù)覽，要么就是用第三方的鏈接去預(yù)覽。這種雖然是最簡(jiǎn)單的方式。但是好多公司
2024年02月14日
瀏覽(26)