頁可以非常方便的為我們展示各種信息,如果遇到重要的資料文獻,希望在本地電腦上保存下來該怎么操作呢?把網址添加到收藏夾,下次直接打開網址查看,但如果資源被網站刪除,就再也找不到了。還是保存在自己電腦里比較放心,那就使用瀏覽器的保存網頁吧,如果保存為單個文件,則只有文字內容,圖片丟失了。如果保存所有內容,將產生一個網頁文件和一個資源文件夾,包括圖片在內的文件都保存在這個文件夾中,由于文件較多不容易歸類保存和傳輸。使用保存網頁的方式,除正文外,還會保存網頁標題導航欄、信息側邊欄、底部聯系信息等無用的內容。
需要保存的網頁標題和正文
有沒有一種方法,保存網頁時,自動智能識別內容標題和正文,且僅保存標題和包括圖片在內的正文內容,自動刪除網頁無效的頭尾和側邊內容,更要過濾網頁上的廣告。這就是“AI保存網頁“,如下圖所示,打開任意新聞、公告或文章頁面,再點擊”AI保存網頁“,就可以一鍵保存網頁標題和正文。
網頁保存后與原頁面對比
找到文檔保存路徑,可以看到以文章標題命名的網頁文件。這個文檔比較大,是因為同時保存和正文中的圖片,也就是說把文字和圖片都保存在單個文檔中的。且為htm網頁格式,可以使用任意瀏覽器打開。把圖片保存在htm網頁代碼中,是什么原理呢?原來木頭瀏覽器在保存網頁時,自動把網頁上的圖片轉換成Base64編碼,這樣就可以在單個文件中保存圖片了。
圖片和文字內容保存在一個網頁文件中
那么是怎樣智能識別文章標題和正文的呢?有js基礎的小伙伴可以繼續往下看。
首先在項目管理器中,創建一個腳本代碼步驟,通過執行一段js腳本代碼找出文章標題。首先獲取網頁頭部的title標簽作為標題,其次是查找H1元素內容作為標題,如果還是找不到,則查找樣式為title的元素內容作為標題。
智能識別網頁標題
var title="";
try{
title=document.title;//取網頁標題
}catch{}
if(title==""){
//網頁標題為空時,查找H1元素內容作為標題
var h1s=document.getElementsByTagName("h1");
if(h1s.length>0)
{
title=h1s[0].innerText;
}
}
if(title==""){
//仍未找到標題時,查找樣式為title的元素內容作為標題
var h1s=document.getElementsByClassName("title");
if(h1s.length>0)
{
title=h1s[0].innerText;
}
}
title;
再創建一個腳本代碼步驟,定義幾個重復使用的函數。
function generateFullXPath(el) {
let query=""
while (el && el.nodeType===Node.ELEMENT_NODE) {
// 也可以使用nodeName,nodeName包含了tagName
let component=el.tagName.toLowerCase()
let index=this.getElementIndex(el)
if (index >=1) {
component +='[' + index + ']'
}
query='/' + component + query
el=el.parentNode
}
return query
}
function getElementIndex(el) {
let index=1
let sib=el.previousSibling
while (sib) {
if (sib.nodeType===Node.ELEMENT_NODE && this.compareTagNameEqual(el, sib)) {
index++
}
sib=sib.previousSibling
}
if (index > 1) return index
sib=el.nextSibling
while (sib) {
if (sib.nodeType===Node.ELEMENT_NODE && this.compareTagNameEqual(el, sib)) {
return 1
}
sib=sib.nextSibling
}
return 0;
};
/**
* 查看兩個元素節點名稱是否相同
*/
function compareTagNameEqual(primaryEl, siblingEl) {
let p=primaryEl, s=siblingEl
// return (p.tagName===s.tagName && (!p.id || p.id===s.id));
return (p.tagName===s.tagName)
};
同樣使用js代碼智能識別查找正文元素,一般文章正文部分由多個段落組成,所以我們從P元素入手,找到子元素包含大量P元素的元素,就是正文元素了。如果沒有P元素,則獲取頁面中間位置,面積較大的元素作為正文元素,并給正文元素設置一個id值”mutoubrowser"作為標記。方便后續步驟調用。
智能識別網頁正文
var content="";
var fa=null;
var ps=document.getElementsByTagName("p");
if(ps.length>0)
{//取包含P的父元素
fa=ps[0].parentElement;
while(fa.parentElement.scrollWidth*fa.parentElement.scrollHeight>fa.scrollWidth*fa.scrollHeight)
{
fa=fa.parentElement;
}
if(ps.length>1)
{//找到第一個p和最后一個p的共同父元素
do{
var endfa=ps[ps.length-1].parentElement;
var faxpath=generateFullXPath(fa);
var endfaxpath=generateFullXPath(endfa);
if(faxpath.indexOf(endfaxpath)==0)
{fa=endfa;
break;
}
else if(endfaxpath.indexOf(faxpath)==0)
{
break;
}
else
{
fa=fa.parentElement;
endfa=endfa.parentElement;
}
}while(true);
}
}
else
{//取頁面中間最大的元素
var w=document.body.clientWidth;
var h=document.body.clientHeight;
var el=document.elementsFromPoint(Math.round(w/2),Math.round(h/3*2));
if(el!=null){
var d=0;
for(var i=0;i<el.length;i++){
var e=el[i];
var dd=e.scrollWidth*e.scrollHeight;
if(dd>d*1.8)
{
fa=e;
}
d=dd;
}
}
else
{
fa=el.document.body;
}
}
if(fa!=null)
{
fa.setAttribute("id","mutoubrowser");
content=fa.innerHTML;
}
content;
再創建一個保存內容步驟,勾選“保存網頁內容”,選擇“下載圖文單個文件”。設置文件名為js變量title,即標題做為文件名,并指定保存文件路徑為“D:\文檔”。在窗口下方設置正文的元素,通過js代碼獲得。
保存圖文到文件
document.getElementById("mutoubrowser");
最后保存項目文件為“AI保存網頁”,通過點擊書簽按鈕運行這個項目,就能智能識別網頁標題和正文,保存網頁有效內容和圖片了。
好,我們經常上網的用戶一般都會收藏對自己有用的網址,并將其存放在瀏覽器的收藏夾中,以便日常使用。在重裝系統前,需要備份好IE收藏夾,待系統安裝完成后可將其重新導入到IE瀏覽器中,我們之前收藏的網址又回來了。
備份IE收藏夾的具體操作方法如下:
1 選擇“導入和導出”命令
打開IE瀏覽器,選擇“文件”|“導入和導出”命令,如下圖所示。
2 導出到文件
彈出對話框,選中“導出到文件”單選按鈕,單擊“下一步”按鈕,如下圖所示。
3 選擇要導出的內容
選中“收藏夾”復選框,單擊“下一步”按鈕,如下圖所示。
4 選擇導出文件夾
選擇需要導出的文件夾,單擊“下一步”按鈕,如下圖所示。
5 單擊“瀏覽”按鈕
輸入文件路徑或單擊“瀏覽”按鈕,如右圖所示。
6 設置導出位置
彈出對話框,選擇導出收藏夾的位置,單擊“保存”按鈕,如下圖所示。
7 單擊“導出”按鈕
返回“導入/導出設置”對話框,單擊“導出”按鈕,如下圖所示。
8 導出成功
成功導出了IE收藏夾,單擊“完成”按鈕,如下圖所示。
9 查看導出文件
打開目標位置,查看導出的文件,如下圖所示。
電腦系統備份IE收藏夾也是經常用的,你備份了把它存在U盤或發到郵箱中,到其它地方使用電腦時就能直接導入使用。
頁中的視頻如何下載到電腦上,你是不是很頭疼?怎么下載保存網頁中的視頻,特別是網頁中嵌入的優酷、騰訊等其他平臺的視頻,我們在日常的工作和生活中,特別是辦公的時候,瀏覽到某個網頁的時候,感覺到中間的視頻挺有用的想保存,但是就是找不到下載的地方,即便找到了下載按鈕,也還提示需要下載他們平臺的客戶端才能下載。
那么有沒有更好的、更簡單的方法呢?
今天辦公老師怪哥就教大家一種方法,這個方法也是辦公師怪哥在網上搜索出來的方法,親測有效。一起來學習學習吧。
首先,我們隨便找一個網頁為例,我隨便點擊一個鏈接,這是一個騰訊的網頁。
我們通常遇到這種網頁視頻,不知道怎么下載的,如果你是用360瀏覽器打開的,有些人會變通的使用視頻右上角有個“錄制小視頻”按鈕,這是360瀏覽器自帶的算是一個插件。但是對電腦要求有點高,電腦配置低的,錄制出來后就比較卡頓,也用不成。這其實也算是一種方法。
我今天教大家的是一種更簡單的方法。注意看圖例,關鍵步驟我會截圖劃圈給大家,便于大家辦公的時候用。
網頁中的視頻如何下載到電腦上