Bootstrap 縮略圖

講解 Bootstrap 縮略圖。大多數站點都需要在網格中布局圖像、視頻、文本等。Bootstrap 通過縮略圖為此提供了一種簡便的方式。使用 Bootstrap 創建縮略圖的步驟如下：

在圖像周圍添加帶有 class .thumbnail 的 <a> 標簽。
這會添加四個像素的內邊距（padding）和一個灰色的邊框。
當鼠標懸停在圖像上時，會動畫顯示出圖像的輪廓。

下面的實例演示了默認的縮略圖：

實例

<divclass="row"><divclass="col-sm-6 col-md-3"><ahref="#"class="thumbnail"><imgsrc="/wp-content/uploads/2014/06/kittens.jpg"alt="通用的占位符縮略圖"></a></div><divclass="col-sm-6 col-md-3"><ahref="#"class="thumbnail"><imgsrc="/wp-content/uploads/2014/06/kittens.jpg"alt="通用的占位符縮略圖"></a></div><divclass="col-sm-6 col-md-3"><ahref="#"class="thumbnail"><imgsrc="/wp-content/uploads/2014/06/kittens.jpg"alt="通用的占位符縮略圖"></a></div><divclass="col-sm-6 col-md-3"><ahref="#"class="thumbnail"><imgsrc="/wp-content/uploads/2014/06/kittens.jpg"alt="通用的占位符縮略圖"></a></div></div>

結果如下所示：

添加自定義的內容

現在我們有了一個基本的縮略圖，我們可以向縮略圖添加各種 HTML 內容，比如標題、段落或按鈕。具體步驟如下：

把帶有 class .thumbnail 的 <a> 標簽改為 <div>。
在該 <div> 內，您可以添加任何您想要添加的東西。由于這是一個 <div>，我們可以使用默認的基于 span 的命名規則來調整大小。
如果您想要給多個圖像進行分組，請把它們放置在一個無序列表中，且每個列表項向左浮動。

下面的實例演示了這點：

實例

<divclass="row"><divclass="col-sm-6 col-md-3"><divclass="thumbnail"><imgsrc="/wp-content/uploads/2014/06/kittens.jpg"alt="通用的占位符縮略圖"><divclass="caption"><h3>縮略圖標簽</h3><p>一些示例文本。一些示例文本。</p><p><ahref="#"class="btn btn-primary"role="button"> 按鈕 </a><ahref="#"class="btn btn-default"role="button"> 按鈕 </a></p></div></div></div><divclass="col-sm-6 col-md-3"><divclass="thumbnail"><imgsrc="/wp-content/uploads/2014/06/kittens.jpg"alt="通用的占位符縮略圖"><divclass="caption"><h3>縮略圖標簽</h3><p>一些示例文本。一些示例文本。</p><p><ahref="#"class="btn btn-primary"role="button"> 按鈕 </a><ahref="#"class="btn btn-default"role="button"> 按鈕 </a></p></div></div></div><divclass="col-sm-6 col-md-3"><divclass="thumbnail"><imgsrc="/wp-content/uploads/2014/06/kittens.jpg"alt="通用的占位符縮略圖"><divclass="caption"><h3>縮略圖標簽</h3><p>一些示例文本。一些示例文本。</p><p><ahref="#"class="btn btn-primary"role="button"> 按鈕 </a><ahref="#"class="btn btn-default"role="button"> 按鈕 </a></p></div></div></div><divclass="col-sm-6 col-md-3"><divclass="thumbnail"><imgsrc="/wp-content/uploads/2014/06/kittens.jpg"alt="通用的占位符縮略圖"><divclass="caption"><h3>縮略圖標簽</h3><p>一些示例文本。一些示例文本。</p><p><ahref="#"class="btn btn-primary"role="button"> 按鈕 </a><ahref="#"class="btn btn-default"role="button"> 按鈕 </a></p></div></div></div></div>

嘗試一下 ?

結果如下所示：

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

本文中，我將展示如何使用 Node.js、Puppeteer、headless Chrome 和 Docker 從樣式復雜的 React 頁面生成 PDF 文檔。

背景：幾個月前，一個客戶要求我們開發一個功能，用戶可以得到 PDF 格式的 React 頁面內容。該頁面基本上是患者病例的報告和數據可視化結果，其中包含許多 SVG。另外還有一些特殊的請求來操縱布局，并對 HTML 元素進行一些重新排列。因此與原始的 React 頁面相比，PDF 中應該有不同的樣式和額外的內容。

由于這個任務比用簡單的 CSS 規則解決要復雜得多，所以我們先探討了可能的實現方法。我們找到了 3 個主要解決方案。這篇博文將指導你了解它們的可能性并最終實施。

在客戶端還是服務器端生成？
方案1：從 DOM 制作屏幕截圖
方案2：僅使用 PDF 庫
最終方案3：Node.js、Puppeteer 和 Headless Chrome
樣式控制
將文件發送到客戶端并保存
在 Docker 中使用 Puppeteer
方案3 +1：CSS打印規則
總結

在客戶端還是服務器端生成？

在客戶端和服務器端都可以生成PDF文件。但是讓后端處理它可能更有意義，因為你并不想耗盡用戶瀏覽器可以提供的所有資源。

即便如此，我仍然會展示這兩種方法的解決方案。

方案1：從 DOM 制作屏幕截圖

乍一看，這個解決方案似乎是最簡單的，事實證明的確是這樣，但它有其自身的局限性。如果你沒有特殊需求，例如在 PDF 中選擇文本或對文本進行搜索，那么這就是一種簡單易用的方法。

此方法簡單明了：從頁面創建屏幕截圖，并把它放到 PDF 文件中。非常直截了當。我們可以使用兩個包來實現：

Html2canvas，根據 DOM 生成截圖
jsPdf，一個生成PDF的庫

開始編碼：

npm install html2canvas jspdf

就這樣！

請注意 html2canvas 的 onclone方法。當你在截圖之前需要操縱 DOM（例如隱藏打印按鈕）時，它是非常方便的。我看到過很多使用這個包的項目。但不幸的是，這不是我們想要的，因為我們需要在后端完成對 PDF 的創建工作。

方案2：只使用 PDF 庫

NPM上有幾個庫，如 jsPDF（如上所述）或PDFKit。他們的問題是，如果我想使用這些庫，我將不得不重新調整頁面結構。這肯定會損害可維護性，因為我需要將所有后續更改應用到 PDF 模板和 React 頁面中。

請看下面的代碼。你需要親自手動創建 PDF 文檔。你需要遍歷 DOM 并找出每個元素并將其轉換為 PDF 格式，這是一項繁瑣的工作。必須找到一個更簡單的方法。

這段代碼段來自 PDFKit 文檔。但是如果你的目標是直接生成一個 PDF 文件，而不是對一個已經存在的（并且不斷變化的）HTML 頁面進行轉換，它還是很有用的。

最終方案3：基于 Node.js 的 Puppeteer 和 Headless Chrome

什么是 Puppeteer？其文檔中寫道：

Puppeteer 是一個 Node 庫，它提供了一個高級 API 來控制 DevTools 協議上的 Chrome 或 Chromium。 Puppeteer 默認以 headless 模式運行 Chrome 或 Chromium，但其也可以被配置為完整的（non-headless）模式運行。

它本質上是一個可以從 Node.js 運行的瀏覽器。如果你讀過它的文檔，其中首先提到的就是你可以用 Puppeteer 來生成頁面的截圖和PDF。優秀！這正是我們想要的。

先用 npmi i puppeteer 安裝 Puppeteer，并實現我們的功能。

這是一個簡單的功能，可導航到 URL 并生成站點的 PD F文件。

首先，我們啟動瀏覽器（僅在 headless 模式下支持 PDF 生成），然后打開新頁面，設置視口，并導航到提供的URL。

設置 waitUntil:'networkidle0' 選項意味著當至少500毫秒沒有網絡連接時，Puppeteer 會認為導航已完成。（可以從 API docs 獲取更多信息。）

之后，我們將 PDF 保存為變量，關閉瀏覽器并返回 PDF。

注意：page.pdf 方法接收 options 對象，你可以使用 'path' 選項將文件保存到磁盤。如果未提供路徑，則 PDF 將不會被保存到磁盤，而是會得到緩沖區。（稍后我將討論如何處理它。）

如果需要先登錄才能從受保護的頁面生成 PDF，首先你要導航到登錄頁面，檢查表單元素的 ID 或名稱，填寫它們，然后提交表單：

要始終將登錄憑據保存在環境變量中，不要硬編碼！

樣式控制

Puppeteer 也有這種樣式操作的解決方案。你可以在生成 PDF 之前插入樣式標記，Puppeteer 將生成具有已修改樣式的文件。

await page.addStyleTag({ content: '.nav { display: none} .navbar { border: 0px} #print-button {display: none}' })

將文件發送到客戶端并保存

好的，現在你已經在后端生成了一個 PDF 文件。接下來做什么？

如上所述，如果你不把文件保存到磁盤，將會得到一個緩沖區。你只需要把含有適當內容類型的緩沖區發送到前端即可。

現在，你只需在瀏覽器向服務器發送請求即可得到生成的 PDF。

一旦發送了請求，緩沖區的內容就應該開始下載了。最后一步是將緩沖區數據轉換為 PDF 文件。

就這樣！如果單擊“保存”按鈕，那么瀏覽器將會保存 PDF。

在 Docker 中使用 Puppeteer

我認為這是實施中最棘手的部分 —— 所以讓我幫你節省幾個小時的百度時間。

官方文檔指出*“在 Docker 中使用 headless Chrome 并使其運行起來可能會非常棘手”*。官方文檔有疑難解答部分，你可以找到有關用 Docker 安裝 puppeteer 的所有必要信息。

如果你在 Alpine 鏡像上安裝 Puppeteer，請確保在看到頁面的這一部分時再向下滾動一點。否則你可能會忽略一個事實：你無法運行最新的 Puppeteer 版本，并且你還需要用一個標記禁用 shm ：

const browser = await puppeteer.launch({
 headless: true,
 args: ['--disable-dev-shm-usage']
});

否則，Puppeteer 子進程可能會在正常啟動之前耗盡內存。

方案 3 + 1：CSS 打印規則

可能有人認為從開發人員的角度來看，簡單地使用 CSS 打印規則很容易。沒有 NPM 模塊，只有純 CSS。但是在跨瀏覽器兼容性方面，它的表現如何呢？

在選擇 CSS 打印規則時，你必須在每個瀏覽器中測試結果，以確保它提供的布局是相同的，并且它不是100％能做到這一點。

例如，在給定元素后面插入一個 break-after 并不是一個多么高深的技術，但是你可能會驚訝的發現要在 Firefox 中使用它需要使用變通方法。

除非你是一位經驗豐富的 CSS 大師，在創建可打印頁面方面有很多的經驗，否則這可能會非常耗時。

如果你可以使打印樣式表保持簡單，打印規則是很好用的。

讓我們來看一個例子吧。

@media print {
 .print-button {
 display: none;
 }
 
 .content div {
 break-after: always;
 }
}

上面的 CSS 隱藏了打印按鈕，并在每個 div 之后插入一個分頁符，其中包含content 類。有一篇很棒的文章總結了你可以用打印規則做什么，以及它們有什么問題，包括瀏覽器兼容性。

考慮到所有因素，如果你想從不那么復雜的頁面生成 PDF，CSS打印規則非常有效。

總結

讓我們快速回顧前面介紹的方案，以便從 HTML 頁面生成 PDF 文件：

從 DOM 產生截圖：當你需要從頁面創建快照時（例如創建縮略圖）可能很有用，但是當你需要處理大量數據時就會有些捉襟見肘。
只用 PDF 庫：如果你打算從頭開始以編程方式創建 PDF 文件，這是一個完美的解決方案。否則，你需要同時維護 HTML 和 PDF 模板，這絕對是一個禁忌。
Puppeteer：盡管在 Docker 上工作相對困難，但它為我們的實現提供了最好的結果，而且編寫代碼也是最簡單的。
CSS打印規則：如果你的用戶受過足夠的教育，知道如何把頁面內容打印到文件，并且你的頁面相對簡單，那么它可能是最輕松的解決方案。正如你在我們的案例中所看到的，事實并非如此。

雖然今天是愚人節，但是以上所有內容都是在真的！

作者：瘋狂的技術宅

鏈接：https://juejin.im/post/5ca1dc0251882543d569e075

言

hello, 大家好, 我是徐小夕, 今天又到了我們的博學時間。

本文是 100+前端幾何學應用案例 專欄的第四篇文章, 之前和大家分享了如何從零實現幾何畫板以及幾何畫板的撤銷重做功能:

前端圖形學實戰: 從零開發幾何畫板(vue3 + vite版)
前端圖形學實戰: 100行代碼實現幾何畫板的撤銷重做等功能(vue3 + vite版)

今天繼續和大家分享一下幾何畫板的圖層管理和實時縮略圖的實現。

demo演示

按照筆者的寫作習慣, 這里先和大家演示一下實現的效果:

可以看到通過操作圖層面板我們可以輕松的切換到某一個元素并對元素進行編輯, 同時在每次操作之后右下角的縮略圖會實時展示畫布最新的變動。

源碼地址: https://gitee.com/lowcode-china/euryd

接下來就讓我們接著之前的內容, 來實現我們的圖層管理面板和實時縮略圖。

技術實現

接下來我還是用大家最最熟悉的 vue3 + ts 來實現, 其他框架實現原理類似, 感興趣的朋友也可以舉一反三, 自行實現。

image.png

圖層管理面板的實現

圖層管理面板主要是為了更方便管理和操作畫布中的元素, 比如 PhotoShop 里的圖層管理:

image.png

或者 H5-Dooring 頁面制作平臺的圖層面板:

image.png

我們可以從這些編輯器中總結出圖層管理的幾個主要功能:

定位或切換元素
顯示隱藏元素
編輯元素(如刪除)
批量操作(如多選批量刪除元素等)
調整元素位置(順序)

所以說我們在設計圖層面板的時候也可以考慮以上幾個點, 接下來我就來構建一下圖層面板, 并實現切換元素,刪除指定元素 的功能。

1. 構建圖層面板

由于圖層面板的元素和畫布實際的元素數據是一一對應的, 所以我們可以直接用 canvasBox 來渲染圖層列表, 這里回顧一下 canvasBox 的數據結構:

type shapeType = "rect" | "circle" | "line";

interface IBaseShapeProp {
  type: shapeType;
  key: string;
  style: any;
}

const canvasBox = ref<{ [key in shapeType]: IBaseShapeProp[] }>({
  rect: [],
  circle: [],
  line: [],
});

其中每個元素都包含如下三個關鍵屬性:

key 元素的唯一id
type 元素的類型(矩形, 圓形, 線等)
style 元素的樣式

這樣我們就可以利用 key 來輕松的定位元素, 如果畫布中元素很多(比如復雜的設計稿), 我們還可以給圖層面板添加搜索和分類功能, 方便我們更高效的定位元素。

一個簡單實現的案例如下:

<div v-show="layerVisible" class="layerWrap">
  <h3>圖層管理</h3>
  <div v-for="item in canvasBox.rect" :key="item.key" class="layerItem">
    <span @click.stop="handleSelected(item.key)">{{ item.key }}</span>
    <span @click="handleDelItem(item.key)"> 刪除 </span>
  </div>
</div>

css樣式如下:

.layerWrap {
    position: absolute;
    left: 60px;
    margin-top: -20px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 160px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    color: #888;
    .layerItem {
      &:hover {
        background-color: rgba(110, 38, 236, 0.1);
      }
      span:last-child {
        margin-left: 20px;
      }
    }
  }

這里分享一下具體實現效果:

由于我們應用是用vue3的組合式函數寫的, 上圖中涉及到的切換元素和刪除元素的方法也很簡單, 具體如下:

import { ref } from "vue";
const curSelect = ref("");
const canvasBox = ref<{ [key in shapeType]: IBaseShapeProp[] }>({
  rect: [],
  circle: [],
  line: [],
});
// 選擇元素
const handleSelected = (key: string) => {
  curSelect.value = key;
};

// 刪除元素
const handleDelItem = (key: string) => {
  canvasBox.value.rect = canvasBox.value.rect.filter((v) => v.key !== key);
};

所以說圖層管理的本質是基于已有的圖元進行數據結構層面的操作。

當然大家也可以擴展我們的畫板應用, 讓它支持多選, 搜索, 排列順序等功能。

徐小夕：Dooring無代碼搭建平臺技術盤點10 贊同 · 4 評論文章

實時縮略圖的實現

我們之前也許看過一些網站在瀏覽頁面的時候會出現小的縮略圖, 可以實時展示當前頁面的情況, 比如:

image.png

這里就簡單和大家分享一下實現方案。

image.png

因為我們在畫布中的每一次操作都會被記錄在 recordManager (記錄管理器, 也就是上篇文章介紹的撤銷重做的歷史快照集合)中, 我們只需要在每次操作后基于當前 dom 生成一張圖片即可(畫布如果是canvas實現的, miniMap實現起來會更簡單)。

所以說我們現在的問題就變成了如何基于 dom 生成圖片快照的問題了, 當然這里也有解決方案, 核心思路就是將 dom 轉換成 xml 結構，然后放在標簽內，借助 svg 的處理能力將 dom 結構轉換成 svg 標簽，然后將svg標簽作為圖片的 base64 地址，最后用 a 標簽實現下載。不過需要注意以下兩個細節:

img標簽的地址必須是base64字符串, 所以我們需要用canvas轉換成base64
canvas標簽直接轉成xml是無法顯示的, 所以我們需要將canvas轉換成base64,再放入圖片的src內

通過以上方式我們就可以原生實現將 dom 轉換為圖片。當然市面上也有比較成熟的方案, 比如:

html2canvas
dom2image

那這里我就用 dom2image 帶大家一起實現一下 miniMap。

首先我們在vite 工程中安裝該庫:

  yarn add dom-to-image

具體實現:

const pushRecordFn = (
  state: { [key in shapeType]: IBaseShapeProp[] },
  prevState: { [key in shapeType]: IBaseShapeProp[] }
) => {
  // 生成mini縮略圖片
  domtoimage
    .toPng(boardDom?.value?.boardDom)
    .then(function (dataUrl: string) {
      miniImg.value = dataUrl;
    })
    .catch(function (error: Error) {
      console.error("腳本錯誤!", error);
    });

  const { snapshots, maxLimit, curIndex } = recordManager.value;
  // 如果兩個狀態相同, 則不推入歷史記錄
  if (!diff(state, snapshots[curIndex])) {
    return;
  }
  // 如果在撤銷的過程中重新執行了新的操作, 則覆蓋上一個狀態
  if (snapshots.length - 1 !== curIndex) {
    snapshots.splice(curIndex + 1, snapshots.length);
  }
  // 超過了最大限制記錄
  if (snapshots.length >= maxLimit) {
    snapshots.shift();
  }

  recordManager.value.snapshots.push(cloneDeep(state));
  recordManager.value.curIndex = recordManager.value.snapshots.length - 1;
};

pushRecordFn 函數就是我們之前在實現撤銷重做功能的快照記錄函數, 如果大家對撤銷重做功能感興趣的可以參考我的文章:

徐小夕：前端圖形學實戰: 100行代碼實現幾何畫板的撤銷重做等功能(vue3 + vite版)5 贊同 · 0 評論文章

好了, 以上就實現了我們的miniMap 縮略圖功能, 演示如下:

后期規劃

后面會繼續圍繞圖形可視化來實現更多有意思的應用, 比如滑動驗證碼, 圖形編輯器, 可視化圖表等, 如果大家感興趣, 可以參考我的github: https://gitee.com/lowcode-china/euryd

如果文章對你有幫助, 歡迎點贊評論, 讓我們一起探索真正的前端技術。

在線咨詢

上一篇：關于HTML5，一位前端工程師推薦你應該讀的書都在這里了！
下一篇：CSS這樣處理HTML列表，三個簡單的CSS屬性，美化你的頁面

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Bootstrap 縮略圖

言

demo演示

技術實現

圖層管理面板的實現

1. 構建圖層面板

實時縮略圖的實現

后期規劃

您的項目需求