首頁 Java java教程 如何使用 Ajax 下載並開啟 PDF 檔案?

如何使用 Ajax 下載並開啟 PDF 檔案?

Oct 30, 2024 am 06:06 AM

How to Download  and Open a PDF File Using Ajax?

使用Ajax 下載並開啟PDF 檔案

在Web 開發中,動態產生檔案並將其下載到客戶端是很常見的。使用 Ajax 處理文件下載可能很棘手,尤其是對於 PDF 等文件格式。一個常見問題是使用 Ajax 呼叫下載和開啟 PDF 檔案。

問題:

使用者有一個操作類,可以產生 PDF 並設定適當的內容類型。他們嘗試透過 Ajax 呼叫來呼叫此操作,並在瀏覽器中開啟下載的 PDF 檔案。但是,Ajax 呼叫會導致錯誤:「您的瀏覽器發送了此伺服器無法理解的請求。」

解決方案:

成功解決此問題使用Ajax下載並開啟PDF 文件,請依照以下步驟:

  1. 產生PDF 文件: 在操作類中,使用您首選的庫產生PDF 文件並設定適當的
  2. 在JavaScript 中處理Ajax 呼叫:

    • 使用XMLHttpRequest 物件啟動對操作網址。
    • 根據您的操作方法將請求方法設定為「POST」或「GET」。
  3. 處理伺服器回應:

    • 在 Ajax 呼叫的成功回呼函數中,處理伺服器的回應。
    • 使用 Blob API 建立一個新的 Blob 來表示下載的 PDF 資料。
    • 建立錨點 () 元素並將其 href 屬性設為 Blob 的物件 URL。
    • 設定 download 屬性以指定 PDF 檔案所需的檔案名稱。
    • 觸發錨點元素上的點擊事件以啟動下載並開啟 PDF 檔案。

以下是示範此方法的範例JavaScript 程式碼:

<code class="javascript">$.ajax({
  url: '&lt;URL_TO_FILE&gt;',
  success: function(data) {
    var blob = new Blob([data]);
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = '&lt;FILENAME_TO_SAVE_WITH_EXTENSION&gt;';
    link.click();
  }
});</code>
登入後複製

透過使用此方法,您可以使用Ajax 成功下載並開啟PDF,從而簡化Web 應用程式的文件處理能力。

以上是如何使用 Ajax 下載並開啟 PDF 檔案?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

2025年的前4個JavaScript框架:React,Angular,Vue,Svelte 2025年的前4個JavaScript框架:React,Angular,Vue,Svelte Mar 07, 2025 pm 06:09 PM

2025年的前4個JavaScript框架:React,Angular,Vue,Svelte

Java的類負載機制如何起作用,包括不同的類載荷及其委託模型? Java的類負載機制如何起作用,包括不同的類載荷及其委託模型? Mar 17, 2025 pm 05:35 PM

Java的類負載機制如何起作用,包括不同的類載荷及其委託模型?

如何將Maven或Gradle用於高級Java項目管理,構建自動化和依賴性解決方案? 如何將Maven或Gradle用於高級Java項目管理,構建自動化和依賴性解決方案? Mar 17, 2025 pm 05:46 PM

如何將Maven或Gradle用於高級Java項目管理,構建自動化和依賴性解決方案?

Node.js 20:關鍵性能提升和新功能 Node.js 20:關鍵性能提升和新功能 Mar 07, 2025 pm 06:12 PM

Node.js 20:關鍵性能提升和新功能

冰山:數據湖桌的未來 冰山:數據湖桌的未來 Mar 07, 2025 pm 06:31 PM

冰山:數據湖桌的未來

如何使用咖啡因或Guava Cache等庫在Java應用程序中實現多層緩存? 如何使用咖啡因或Guava Cache等庫在Java應用程序中實現多層緩存? Mar 17, 2025 pm 05:44 PM

如何使用咖啡因或Guava Cache等庫在Java應用程序中實現多層緩存?

Spring Boot Snakeyaml 2.0 CVE-2022-1471問題已修復 Spring Boot Snakeyaml 2.0 CVE-2022-1471問題已修復 Mar 07, 2025 pm 05:52 PM

Spring Boot Snakeyaml 2.0 CVE-2022-1471問題已修復

如何共享黃瓜中的步驟之間的數據 如何共享黃瓜中的步驟之間的數據 Mar 07, 2025 pm 05:55 PM

如何共享黃瓜中的步驟之間的數據

See all articles