在網上找到需要資料後，如果要將資料保存，最簡單的方法就是使用 熒幕截圖 保存資料
但 熒幕截圖 所保存的資料是 圖像格式，無法將 文字資料 保存
如果圖像與文字都需要同時保存，通常都要將圖像及文字分開保存
因此在下嘗試將圖像及文字能同時保存的方法
系統熒幕擷取
假設閣下需要保存頁面某部分內容，但內容可能超出熒幕尺寸，無法完整擷取
雖然將內容可以調整大小，但就是影響了擷取結果
完整頁面擷取
網頁瀏覽器都有提供方便擷取網頁內容工具
例如 Firefox 可以使用 Ctrl + Shift + S 能啟動 擷取功能，並按 儲存完整頁面
便會將整頁的內容擷取
保存後可以因應需要修改擷取後的圖像內容
指定元素擷取
Firefox 還可以在 檢測器 中，直接選擇元素並點選 掫取該節點的圖片
直接保存 目標元素 的內容
以上方法都會頁面內容擷取成圖像，而文字內容則無法選取
列印為PDF
列印為PDF 是可以將網頁上的文字資料保存，但一通情況下會將整個頁面保存
雖然可以調整為只列印需要的頁數，但如果同頁有其他內容則無法調整
修改列印內容
使用 Javascript
使用網頁瀏覽器的 檢測 來查看需要保存的內容
確認選取的元素是需要保存的內容
在 檢測器分頁 ，如果需要保存的內容的元素沒有識別方法，需要先替元素加入識別的屬性
在元素上 按 滑鼠右鍵 > 屬性 > 新增屬性
最簡單的是加入 id屬性，並設定 id 的內容
id 的內容必須符合 唯一性(Unique)，不能與頁面其他元素的 id 相同
(不一定使用 id="a")
到 主控台分頁
如果 主控器分頁 有太多不需要的資訊，可以按 垃圾桶圖示 刪除資訊
由於 主控台 能夠直接執行 Javascript 與當前網頁內容互動，因此到 主控台分頁 的 執行列 中，輸入：
let element = document.getElementById("a").cloneNode(true);
將 目標元素 連同所有 子元素 拓製一份與目標元素完全相同 但與 根文件無關的元素
for (let i in document.body.childNodes) {
if (document.body.childNodes[i] instanceof Element && document.body.childNodes[i].tagName.toLowerCase() != "style") {
document.body.childNodes[i].remove();
}
}
由於 目標元素 有機會使用 body 中的 style 的風格，因此移除所有不是 style 的元素
避免影響 列印為PDF 的結果
document.body.innerHTML = "";
但有些頁面的內容無法使用剛才的方法篩選及移除，唯有將 body 中所有元素都移除
不過這種方法有機會拎顯示風格與原本不同
移除所有不是 style 的元素後的頁面情況
最後輸入：
document.body.append(element);
將 拓製 的 目標元素 加入到 body 中
只有 目標元素 的頁面
預覽列印時，便會顯示 只有 目標元素
如果 目標元素 列印為PDF 的效果不理想，可以到 檢測器分頁 修改
還可以修改 列印為PDF 的設定，令內容符合需要的效果
測試效果
只保存 目標元素內容 的 PDF
使用這種方法除了只保存目標元素的內容，還能夠將文字內容保存
文字內容能夠根據需要選取
如果保存的內容是具備向量特性(主要是文字)，保存到 PDF 時，同樣保留向量特性，縮放不會影響內容的清晰度
使用 CSS
雖然 Javascript 功能強大，但使用者需要較多編程技術及知識才能方便使用
因此在下嘗試尋找只需要簡單修改一些內容便能夠達到類似效果的方法
在下發現一些網頁在網頁瀏覽器顯示的內容與預覽列印的內容不同
原因是頁面設置了 @media print 來設定列印規則
當使用者預覽列印時，會以 @media print 的設定值來列印頁面的內容
因此在下認為可以使用這方法來替代 Javascript 比較複雜的編程要求
在 檢測器分頁 ，將需要 列印為PDF 元素上 按 滑鼠右鍵 > 編輯 HTML
同樣要將 目標元素 加上 id 方便識別外，還需要加上 style 並設定 CSS
@media print {
body * {
visibility: hidden;
}
#a, #a * {
visibility: visible;
}
}
(style 的位置並沒有限制，在下只是方便尋找，因此編寫在 目標元素 前)
編輯後，點擊其他元素以確認更新
在 預覽列印 查看列印內容
由於 元素 只是隱藏，因此仍然佔用頁面空間
所以在 預覽列印 中，目標元素 仍然會維持在原本的位置
調整 目標元素 至合適的尺寸
但 目標元素 可能會因調整尺寸，導致需要 跨越2頁，或在不適合的位置換頁，令效果不佳
可以再次修改 目標元素 的 style ，加入
break-inside: avoid;
當 目標元素 橫跨2頁，時，會將 目標元素 移至下頁開始位置
然後同樣按需要微調 目標元素 的效果
(例如在下希望整元素填滿整頁，因此微調表格單元格的高度)
最後按需要，在 預覽列印 > 頁面 的選擇頁數，來 列印為PDF
補充資料
捲動的內容
這兩個方法不是完全能夠將任意元素內容獨立列印
如果元素內容需要 捲動 才能顯示，便無法列印捲動樣式中的所有內容
在下使用 Youtube 的 播放清單 為例子
由於 播放清單 使用捲動效果，因此無法在 預覽列印 中顯示所有內容
在下使用 CSS 的方法將 播放清單 以外的內容隱藏，顯示捲動的內容無法完全在預覽列印中顯示
(不知甚麼原因， Youtube 有部分內容無法隱藏)
確認 播放清單 的元件
修改 播放清單 的樣式
(只需要停用 播放清單 的 min-height 樣式即可，但實際情況不限於 min-height 屬性)
失去 捲動樣式 旳 播放清單，便會顯示所有內容
由於在下認為列印的結果不太好，因此稍微修改內容
最後只剩下 播放清單
最後 列印為PDF 後，在下還意外發現 PDF 的內容還保留 網頁超連結 功能
總結
這個想法是在下在網上尋找資料後發現，保存資料時只能使用 螢幕截圖 或將整個網頁 列印為PDF，這樣的選擇非常有限
特別是當要保存的內容包含 圖文並茂 或 結構化內容 時，處理起來相當麻煩
當然，對於純文字內容，可以直接複製並保存
對於圖文並茂的內容，也能以 文本(Document) 的形式保存
至於結構化內容(例如 表格(Table))，即使複製到 試算表(Spreadsheet) 中，通常也會有差異
如果內容較為複雜，整理起來不方便
而原本網頁內容已經既美觀又方便，為何還要花時間重新製作相同的文件？
因此在下嘗試使在檢查模式中修改網頁資料，可以直接將指定的內容保存
這樣可以省卻不必要的內容，專注於重點
而且這種方法比 熒幕截圖 更佳，因為截圖僅保留圖片格式，無法選取文字或保留功能(如超連結)
然而，這需要使用者具備一定的編程知識和網頁瀏覽器的操作能力
沒有留言 :
張貼留言