vue 實現 pdf 預覽功能

来源:https://www.cnblogs.com/chenyuanrumeng/archive/2023/08/18/17639410.html
-Advertisement-
Play Games

隨著互聯網的發展，PDF 文件在信息交流和文檔分享中起著重要的作用。通過在 Vue 組件中實現 PDF 預覽功能，我們可以為用戶提供便捷的內容閱讀體驗。 通過閱讀本文，讀者將瞭解如何在 Vue 中實現強大的 PDF 預覽功能，為用戶提供方便的閱讀體驗。無論你是剛入門的 Vue 開發者，還是有一定經... ...


1 技術背景

1.1 Vue.js 簡介和特點

Vue.js 是一種用於構建用戶界面的漸進式框架。它具有以下特點：

  • 易學易用：Vue.js 的 API 設計簡單直觀，使得開發者可以快速上手。
  • 響應式數據綁定：Vue.js 使用了響應式的數據綁定機制，當數據發生變化時，頁面會自動更新。
  • 組件化開發：Vue.js 支持組件化開發，將界面拆分為多個獨立可復用的組件，提高代碼的可維護性和復用性。
  • 虛擬 DOM：Vue.js 使用虛擬 DOM 技術，在記憶體中維護一個虛擬的 DOM 樹，通過比較新舊 DOM 樹的差異，最小化操作真實 DOM 的次數，提升性能。

1.2 PDF.js 庫簡介和功能概述

PDF.js 是一個由 Mozilla 開發的 JavaScript 庫，用於在 Web 上顯示 PDF 文件。它具有以下功能：

  • 在瀏覽器中原生渲染 PDF：PDF.js 可以直接在瀏覽器中渲染 PDF 文件，無需依賴外部插件或軟體。
  • 支持基本的查看和導航功能：PDF.js 提供了一些基本的查看和導航功能，如縮放、翻頁、搜索等。
  • 自定義樣式和交互：PDF.js 允許開發者通過 API 自定義 PDF 文件的顯示樣式和交互行為。
  • 跨平臺支持：PDF.js 可以在各種現代瀏覽器和操作系統上運行，包括桌面和移動設備。

1.3 為什麼選擇 Vue 和 PDF.js 結合實現 PDF 預覽功能

結合 Vue 和 PDF.js 實現 PDF 預覽功能有以下優勢：

  • Vue 提供了響應式數據綁定和組件化開發的特性，可以方便地管理 PDF 預覽組件的狀態和邏輯。
  • PDF.js 是一個功能強大且易於使用的 JavaScript 庫，提供了原生渲染 PDF 的能力，並且具有自定義樣式和交互的靈活性。
  • Vue 和 PDF.js 都是流行的前端技術，社區支持和文檔資源豐富，可以幫助開發者更快速地實現 PDF 預覽功能。
  • 結合 Vue 和 PDF.js 還可以充分利用 Vue 的生態系統和插件庫，如 Vuex、Vue Router 等，進一步擴展和增強 PDF 預覽功能。

2 開發環境準備

在開始使用 Vue.js 和 PDF.js 結合實現 PDF 預覽功能之前，你需要準備開發環境。以下是一些步驟來幫助您完成這個過程：

2.1 安裝 Node.js 和 Vue CLI

首先，你需要安裝 Node.js 和 npm（Node 包管理器）。Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行時環境，用於在伺服器端運行 JavaScript 代碼。npm 是 Node.js 的預設軟體包管理器，用於安裝和管理項目所需的依賴項。

你可以從 Node.js 官方網站（https://nodejs.org）下載並安裝適合你操作系統的最新版本的 Node.js。安裝完畢後，打開終端或命令提示符視窗，並輸入以下命令來驗證 Node.js 和 npm 是否成功安裝：

node -v
npm -v

接下來，你需要全局安裝 Vue CLI（Vue Command Line Interface），它是一個用於快速創建 Vue 項目的工具。在終端或命令提示符視窗中運行以下命令進行安裝：

npm install -g @vue/cli

安裝完成後，你可以通過運行以下命令來檢查 Vue CLI 是否成功安裝：

vue --version

2.2 創建 Vue 項目

安裝 Vue CLI 後，你可以使用它來創建一個新的 Vue 項目了。在終端或命令提示符視窗中，進入你想要創建項目的目錄，並運行以下命令：

vue create my-project

這將提示你選擇一些配置選項來創建項目你可以使用預設選項，也可以根據需要進行自定義配置。完成配置後，Vue CLI 將下載所需的依賴項並創建一個新的 Vue 項目。

在項目創建完成後，進入項目目錄：

cd my-project

現在，你已經準備好開始開發了！你可以使用任何喜歡的代碼編輯器打開項目文件夾，並按照下一步的指導繼續進行 PDF 預覽功能的實現。

3 集成 PDF.js 到 Vue 項目

為了將PDF.js集成到Vue項目中，您可以按照以下步驟進行操作：

3.1 下載和引入 PDF.js 庫

首先，您需要下載PDF.js庫。您可以從官方GitHub倉庫（https://github.com/mozilla/pdf.js）下載最新版本的PDF.js。

一旦您下載了PDF.js，將其解壓縮並複製到您的Vue項目的文件夾中。然後，在您的Vue項目中創建一個名為pdfjs的文件夾，並將解壓縮後的PDF.js文件粘貼到該文件夾中。

接下來，在您的Vue項目中找到public/index.html文件，併在文件的<head>標簽內添加以下代碼以引入PDF.js庫：

<script src="./pdfjs/build/pdf.js"></script>

這樣就完成了PDF.js庫的引入。

3.2 在 Vue 組件中使用<canvas>元素展示 PDF 頁面

要在Vue組件中顯示PDF頁面，您可以使用HTML5的<canvas>元素。在您希望顯示PDF的組件模板中，添加一個<canvas>元素作為容器：

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>

這個<canvas>元素將用於渲染PDF頁面。

3.3 使用 PDF.js 提供的 API 載入和渲染 PDF 文件

現在，您可以在Vue組件的JavaScript部分編寫載入和渲染PDF文件的邏輯。在Vue組件的<script>標簽中，添加以下代碼：

export default {
  mounted() {
    this.loadPDF();
  },
  methods: {
    async loadPDF() {
      const pdfUrl = 'path/to/your/pdf/file.pdf'; // 替換為您的PDF文件路徑
      
      const loadingTask = window.PDFJS.getDocument(pdfUrl);
      const pdf = await loadingTask.promise;
      
      const canvas = this.$refs.pdfCanvas;
      const context = canvas.getContext('2d');
      
      const page = await pdf.getPage(1); // 載入第一頁
      const viewport = page.getViewport({ scale: 1 });
      
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      
      await page.render(renderContext);
    }
  }
}

上述代碼首先使用window.PDFJS.getDocument()方法載入PDF文件，並返回一個Promise對象。然後，我們獲取<canvas>元素和其上下文（context）。接下來，我們使用pdf.getPage()方法載入PDF的第一頁，並通過page.getViewport()方法獲取頁面的視口信息。

之後，我們設置<canvas>元素的高度和寬度以適應頁面視圖，並創建一個渲染上下文對象。最後，我們調用page.render()方法將PDF頁面渲染到<canvas>元素上。

3.4 實現頁面切換和縮放功能

要實現PDF頁面的切換和縮放功能，您可以編寫一些額外的方法併在模板中綁定相應的事件。

例如，您可以添加兩個按鈕來實現上一頁和下一頁的切換功能：

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
    <button @click="previousPage">Previous Page</button>
    <button @click="nextPage">Next Page</button>
  </div>
</template>

然後，在Vue組件的JavaScript部分添加以下代碼：

export default {
  data() {
    return {
      pdf: null,
      currentPage: 1
    };
  },
  mounted() {
    this.loadPDF();
  },
  methods: {
    async loadPDF() {
      // ...
    },
    async previousPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        await this.renderPage(this.currentPage);
      }
    },
    async nextPage() {
      if (this.currentPage < this.pdf.numPages) {
        this.currentPage++;
        await this.renderPage(this.currentPage);
      }
    },
    async renderPage(pageNumber) {
      const page = await this.pdf.getPage(pageNumber);
      const viewport = page.getViewport({ scale: 1 });
      
      const canvas = this.$refs.pdfCanvas;
      const context = canvas.getContext('2d');
      
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      
      await page.render(renderContext);
    }
  }
}

在這個例子中，我們使用data()方法初始化了一個名為currentPage的變數，並將其綁定到模板中。然後，我們編寫了previousPage()和nextPage()方法來更新currentPage並調用renderPage()方法重新渲染頁面。

通過這種方式，你可以實現簡單的頁面切換功能。類似地，你還可以編寫其他方法來實現縮放、頁碼跳轉等功能。

4 處理 PDF 載入和錯誤

在 Vue 項目中集成 PDF.js 時，你可以通過以下步驟來處理 PDF 載入和錯誤：

4.1 顯示載入進度條

要顯示載入進度條，你可以使用 Vue 框架的組件和狀態管理。首先，在你的 Vue 組件中創建一個loading變數來表示 PDF 是否正在載入：

data() {
  return {
    loading: true,
  };
},

然後，在模板中根據loading變數的值來顯示或隱藏載入進度條。你可以使用 Vue 的條件渲染指令（v-if）來實現這一點。例如，你可以在模板中添加一個全屏的載入動畫組件，並將其與loading變數關聯起來：

<template>
  <div>
    <loading-spinner v-if="loading"></loading-spinner>
    <!-- 其他內容 -->
  </div>
</template>

當 PDF 開始載入時，將loading變數設置為true，載入完成後將其設置為false。

4.2 處理載入錯誤和異常情況

PDF.js 提供了一些 API 來處理載入錯誤和異常情況。你可以使用這些 API 來捕獲並處理載入過程中可能發生的錯誤。

首先，在 Vue 組件的方法中，使用 PDF.js 的getDocument()函數來載入 PDF 文件。這個函數返回一個 Promise 對象，你可以使用.catch()方法來捕獲載入過程中的錯誤：

loadPDF() {
  PDFJS.getDocument('/path/to/pdf/file.pdf')
    .then((pdf) => {
      // 載入成功後的處理邏輯
    })
    .catch((error) => {
      // 載入錯誤時的處理邏輯
    });
},

在catch()方法中，你可以根據具體的錯誤類型來執行相應的操作。例如，如果載入失敗，你可以顯示一個錯誤提示信息：

.catch((error) => {
  console.error('PDF 載入錯誤:', error);
  this.showErrorMessage = true;
});

在模板中，你可以使用條件渲染指令（v-if）來顯示錯誤消息：

<template>
  <div>
    <div v-if="showErrorMessage" class="error-message">PDF 載入失敗，請重試。</div>
    <!-- 其他內容 -->
  </div>
</template>

這樣，當發生載入錯誤時，錯誤消息將被顯示出來。

除了捕獲載入錯誤外，你還可以使用 PDF.js 提供的其他 API 來處理異常情況。例如，你可以使用pdf.numPages屬性獲取 PDF 文件的總頁數，併在載入完成後進行一些額外的處理。

5 實現其他功能

5.1 頁碼控制

要實現頁碼控制功能，你可以在 Vue 項目中創建一個輸入框或下拉列表，用於用戶輸入或選擇所需的頁面號碼。然後，在用戶提交表單或選擇頁碼後，你可以使用 PDF.js 提供的 API 將視圖定位到指定的頁面。

首先，你需要在 Vue 組件中定義一個變數來存儲當前頁碼，例如currentPage。然後，你可以在模板中創建一個輸入框或下拉列表，並綁定它與currentPage變數。當用戶更改頁碼時，currentPage變數會自動更新。

接下來，你需要在 Vue 組件的方法中處理頁碼變化的邏輯。你可以使用 PDF.js 提供的pdfViewer.scrollPageIntoView()方法將視圖滾動到指定的頁面。例如：

methods: {
  goToPage() {
    // 將字元串轉換為數字類型
    const pageNumber = parseInt(this.currentPage, 10);

    if (pageNumber >= 1 && pageNumber <= this.totalPages) {
      pdfViewer.scrollPageIntoView({
        pageNumber,
      });
    }
  },
},

在上面的代碼中，我們首先將用戶輸入的頁碼轉換為數字類型，並確保其在有效範圍內（從 1 到總頁面數）。然後，我們使用scrollPageIntoView()方法將視圖滾動到指定的頁面。

最後，你可以在模板中添加一個按鈕或提交表單的事件監聽器，以便在用戶點擊按鈕或提交表單時調用goToPage()方法。

5.2 縮略圖導航

要實現縮略圖導航功能，你可以使用 PDF.js 提供的pdfThumbnailViewer對象來顯示縮略圖。首先，你需要在 Vue 組件中創建一個元素，用於容納縮略圖。然後，在 Vue 組件的生命周期鉤子函數（如mounted）中初始化縮略圖，並將其綁定到相應的元素上。

mounted() {
  const thumbnailContainer = document.getElementById('thumbnail-container');

  pdfThumbnailViewer.initialize(thumbnailContainer, pdfDocument);
},

在上面的代碼中，我們首先通過getElementById()方法獲取縮略圖容器的 DOM 元素。然後，我們使用initialize()方法將縮略圖初始化並綁定到容器上。

最後，你可以在模板中添加一個具有唯一 ID 的元素，作為縮略圖容器的占位符。

<div id="thumbnail-container"></div>

這樣，當 Vue 組件被掛載時，縮略圖就會自動載入和顯示在指定的容器中了。

5.3 文本搜索功能

要實現文本搜索功能，你可以使用 PDF.js 提供的pdfFindController對象來執行文本搜索操作。首先，你需要在 Vue 組件中創建一個輸入框，用於用戶輸入要搜索的關鍵字。然後，在 Vue 組件的方法中處理搜索邏輯。

首先，你需要定義一個變數來存儲用戶輸入的關鍵字，例如searchKeyword。然後，在用戶提交表單或按下回車鍵時，你可以使用 PDF.js 提供的pdfFindController.executeCommand()方法執行搜索操作。

methods: {
  search() {
    pdfFindController.executeCommand('find', {
      query: this.searchKeyword,
      highlightAll: true,
    });
  },
},

在上面的代碼中，我們使用executeCommand()方法執行搜索命令，並傳遞一個包含查詢關鍵字和是否高亮所有匹配項的配置對象。

最後，你可以在模板中添加一個按鈕或提交表單的事件監聽器，以便在用戶點擊按鈕或提交表單時調用search()方法。

這樣，當用戶進行文本搜索時，PDF.js 會自動查找並高亮與關鍵字匹配的文本內容。

6 優化和性能調優

優化和性能調優是確保應用程式高效運行的重要方面。在實現 PDF 預覽功能時，以下是一些優化和性能調優的建議：

6.1 懶載入 PDF 頁面

懶載入是指在需要顯示頁面時才進行載入，而不是一次性載入所有頁面。這可以提高初始載入速度並減少資源占用。你可以使用 Vue 的非同步組件或按需載入來實現懶載入 PDF 頁面。

6.2 緩存已載入的頁面

為了避免每次切換頁面都重新載入 PDF 文件，你可以將已載入的頁面緩存在客戶端（如瀏覽器）中。這樣，在用戶再次訪問相同頁面時，可以直接從緩存中獲取頁面，而不必重新下載和渲染 PDF 文件。

6.3 壓縮和優化 PDF 文件大小

PDF 文件的大小對載入時間和性能有很大影響。你可以使用各種工具和技術來壓縮和優化 PDF 文件的大小。例如，可以使用 Adobe Acrobat 等專業工具進行優化，刪除不必要的元數據、嵌入字體子集、壓縮圖像等。另外，還可以考慮使用 WebP 格式替代 JPEG 格式來進一步減小文件大小。

通過以上優化和性能調優措施，你可以改善 PDF 預覽功能的載入速度和性能，並提供更好的用戶體驗。

7 測試和排錯

7.1 使用測試工具進行功能和性能測試

在開發 Vue 項目中實現 PDF 預覽功能後，使用測試工具可以幫助我們驗證功能的正確性並評估性能。以下是一些常用的測試工具：

  1. Jest：Jest 是一個流行的 JavaScript 測試框架，適用於單元測試和集成測試。你可以編寫針對 PDF 預覽組件的各種測試用例，並使用 Jest 運行這些測試。

  2. Puppeteer：Puppeteer 是一個 Node.js 庫，提供了控制 Headless Chrome 瀏覽器的 API。你可以使用 Puppeteer 模擬用戶與 PDF 預覽界面的交互操作，並檢查預期的結果是否符合預期。

  3. Cypress：Cypress 是一個端到端的前端測試框架，可以模擬用戶在真實瀏覽器環境下與應用程式進行交互。你可以使用 Cypress 編寫自動化測試腳本來測試 PDF 預覽功能，並生成詳細的測試報告。

7.2 排查和解決常見問題和錯誤

在開發過程中，可能會遇到一些常見的問題和錯誤。以下是一些排查和解決問題的建議：

  1. 查看瀏覽器控制台輸出：當 PDF 預覽功能出現問題時，打開瀏覽器的開發者工具，查看控制台輸出以獲取潛在的錯誤信息。

  2. 檢查網路請求：確保 PDF 文件正確載入並返回了預期的內容。檢查網路請求的狀態碼、響應頭和響應體，以確定是否存在問題。

  3. 檢查依賴項版本：如果使用了第三方庫或插件來實現 PDF 預覽功能，請確保所使用的版本與你的項目相容，並且沒有已知的問題或錯誤。

  4. 閱讀文檔和社區支持：閱讀相關庫的官方文檔，查找常見問題和解決方案。此外，參與開發者社區，尋求幫助和建議。

  5. 調試代碼：使用調試工具（如 Chrome DevTools）在代碼中設置斷點，逐步執行代碼並觀察變數和函數的值，以找出潛在的問題。

  6. 縮小範圍：如果問題無法解決，嘗試縮小問題範圍，創建一個簡化的示例項目或複製到 CodeSandbox 等線上編輯器上進行測試，以確定問題是源於你的代碼還是環境配置。

通過以上方法，你可以更好地排查和解決常見問題和錯誤，確保 PDF 預覽功能的正常運行。

8 總結

在本文中，我們學習瞭如何在 Vue 環境中實現 PDF 預覽功能。我們引導讀者完成了項目的依賴安裝和配置，並介紹瞭如何選擇和使用適合的 PDF 渲染庫。我們展示瞭如何載入和顯示 PDF 文件，添加了導航工具和其他功能，為用戶提供了更好的閱讀體驗。

通過本文的指導，讀者可以快速上手併在自己的 Vue 項目中實現 PDF 預覽功能。無論你是初學者還是有經驗的開發者，本文都為你提供了清晰的步驟和示例代碼，幫助你輕鬆完成任務。

PDF 預覽功能可以在各種場景中發揮重要作用，例如線上文檔閱讀、電子書閱讀器等。希望本文能夠幫助你添加這一功能，並提升用戶體驗。

感謝你閱讀本文，希望你能夠通過學習和實踐，不斷探索和應用 Vue 技術，提升自己的開發能力。祝你在未來的項目中取得成功！


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 3 JavaScript字元串操作
    ##### 3 字元串操作 常用的字元串操作相關的方法： ``` s.split() 字元串切割 s.substr(start, len) 字元串切割, 從start開始切, 切len個字元 s.substring(start, end) 字元串切割, 從start切割到end s.length 字 ...
  • 7 HTML錨點應用
    ##### 7 錨點應用 錨點( anchor )是超鏈接的一種應用，也叫命名錨記，錨點可以像一個定位器一樣，可以實現頁面內的鏈接跳轉，運用相當普遍。例如，我們有一個網頁，由於內容太多，導致頁面很長，而且裡面的內容，可以分為N個部分。這樣的話，我們就可以在網頁的頂部設置一些錨點，這樣便可以方便瀏覽者 ...
  • 2 JavaScript的基礎類型
    ##### 2 JavaScript的基礎類型 JS雖然是一個腳本語言. 麻雀雖小, 五臟俱全. 在js中也是可以像其他編程語言一樣. 聲明變數, 條件判斷, 流程式控制制等等. 我們先看一下JS中的數據類型 在js中主要有這麼幾種數據類型(基本) ```javascrpit number 數字, 不論 ...
  • 6 HTML圖片標簽
    ##### 6 圖片標簽 在HTML中，圖像由標簽定義的，它可以用來載入圖片到html網頁中顯示。網頁開發過程中，有三種圖片格式被廣泛應用到web里，分別是 jpg、png、gif。 img標簽的屬性： ``` /* src屬性： 指定圖像的URL地址，是英文source的簡寫，表示引入資源。 sr ...
  • 5 HTML表單標簽
    ##### 5 表單標簽 表單主要是用來收集客戶端提供的相關信息，提供了用戶數據錄入的方式，有多選、單選、單行文本、下拉列表等輸入框，便於網站管理員收集用戶的數據，是Web瀏覽器和Web伺服器之間實現信息交流和數據傳遞的橋梁. 表單被form標簽包含，內部使用不同的表單元素來呈現不同的方式來供用戶輸 ...
  • React請求機制優化思路
    說起數據載入的機制，有一個繞不開的話題就是前端性能，很多電商門戶的首頁其實都會做一些垂直的定製優化，比如讓請求在頁面最早載入，或者在前一個頁面就進行預載入等等。 ...
  • 1 JavaScript的引入方式
    ##### 1 JavaScript的引入方式 JavaScript, 是一門能夠運行在瀏覽器上的腳本語言. 簡稱JS. 首先, Javascript這個名字的由來就很有意思, 不少人認為Javascript和Java貌似很像. 容易想象成Java的腳本. 但其實不然, 兩者之間沒有任何關係. 純粹 ...
  • 4 HTML表格標簽
    ##### 4 表格標簽 表格標簽也是一種複合標簽。由：table,tr,td,th,thead,tbody組合，由行和列組合成，行和列交叉的地方就是單元格。在HTML中使用table來定義表格。網頁的表格和辦公軟體裡面的xls一樣，都是有行有列的。HTML使用tr標簽定義行，使用td標簽定義列。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類