頁(yè)可以非常方便的為我們展示各種信息，如果遇到重要的資料文獻(xiàn)，希望在本地電腦上保存下來(lái)該怎么操作呢？把網(wǎng)址添加到收藏夾，下次直接打開(kāi)網(wǎng)址查看，但如果資源被網(wǎng)站刪除，就再也找不到了。還是保存在自己電腦里比較放心，那就使用瀏覽器的保存網(wǎng)頁(yè)吧，如果保存為單個(gè)文件，則只有文字內(nèi)容，圖片丟失了。如果保存所有內(nèi)容，將產(chǎn)生一個(gè)網(wǎng)頁(yè)文件和一個(gè)資源文件夾，包括圖片在內(nèi)的文件都保存在這個(gè)文件夾中，由于文件較多不容易歸類(lèi)保存和傳輸。使用保存網(wǎng)頁(yè)的方式，除正文外，還會(huì)保存網(wǎng)頁(yè)標(biāo)題導(dǎo)航欄、信息側(cè)邊欄、底部聯(lián)系信息等無(wú)用的內(nèi)容。
需要保存的網(wǎng)頁(yè)標(biāo)題和正文
有沒(méi)有一種方法，保存網(wǎng)頁(yè)時(shí)，自動(dòng)智能識(shí)別內(nèi)容標(biāo)題和正文，且僅保存標(biāo)題和包括圖片在內(nèi)的正文內(nèi)容，自動(dòng)刪除網(wǎng)頁(yè)無(wú)效的頭尾和側(cè)邊內(nèi)容，更要過(guò)濾網(wǎng)頁(yè)上的廣告。這就是“AI保存網(wǎng)頁(yè)“，如下圖所示，打開(kāi)任意新聞、公告或文章頁(yè)面，再點(diǎn)擊”AI保存網(wǎng)頁(yè)“，就可以一鍵保存網(wǎng)頁(yè)標(biāo)題和正文。
網(wǎng)頁(yè)保存后與原頁(yè)面對(duì)比
找到文檔保存路徑，可以看到以文章標(biāo)題命名的網(wǎng)頁(yè)文件。這個(gè)文檔比較大，是因?yàn)橥瑫r(shí)保存和正文中的圖片，也就是說(shuō)把文字和圖片都保存在單個(gè)文檔中的。且為htm網(wǎng)頁(yè)格式，可以使用任意瀏覽器打開(kāi)。把圖片保存在htm網(wǎng)頁(yè)代碼中，是什么原理呢？原來(lái)木頭瀏覽器在保存網(wǎng)頁(yè)時(shí)，自動(dòng)把網(wǎng)頁(yè)上的圖片轉(zhuǎn)換成Base64編碼，這樣就可以在單個(gè)文件中保存圖片了。
圖片和文字內(nèi)容保存在一個(gè)網(wǎng)頁(yè)文件中
那么是怎樣智能識(shí)別文章標(biāo)題和正文的呢？有js基礎(chǔ)的小伙伴可以繼續(xù)往下看。
首先在項(xiàng)目管理器中，創(chuàng)建一個(gè)腳本代碼步驟，通過(guò)執(zhí)行一段js腳本代碼找出文章標(biāo)題。首先獲取網(wǎng)頁(yè)頭部的title標(biāo)簽作為標(biāo)題，其次是查找H1元素內(nèi)容作為標(biāo)題，如果還是找不到，則查找樣式為title的元素內(nèi)容作為標(biāo)題。
智能識(shí)別網(wǎng)頁(yè)標(biāo)題
var title="";
try{
title=document.title;//取網(wǎng)頁(yè)標(biāo)題
}catch{}
if(title==""){
//網(wǎng)頁(yè)標(biāo)題為空時(shí)，查找H1元素內(nèi)容作為標(biāo)題
var h1s=document.getElementsByTagName("h1");
if(h1s.length>0)
{
title=h1s[0].innerText;
}
}
if(title==""){
//仍未找到標(biāo)題時(shí)，查找樣式為title的元素內(nèi)容作為標(biāo)題
var h1s=document.getElementsByClassName("title");
if(h1s.length>0)
{
title=h1s[0].innerText;
}
}
title;再創(chuàng)建一個(gè)腳本代碼步驟，定義幾個(gè)重復(fù)使用的函數(shù)。
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;
};
/**
* 查看兩個(gè)元素節(jié)點(diǎn)名稱(chēng)是否相同
*/
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代碼智能識(shí)別查找正文元素，一般文章正文部分由多個(gè)段落組成，所以我們從P元素入手，找到子元素包含大量P元素的元素，就是正文元素了。如果沒(méi)有P元素，則獲取頁(yè)面中間位置，面積較大的元素作為正文元素，并給正文元素設(shè)置一個(gè)id值”mutoubrowser"作為標(biāo)記。方便后續(xù)步驟調(diào)用。
智能識(shí)別網(wǎng)頁(yè)正文
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)
{//找到第一個(gè)p和最后一個(gè)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
{//取頁(yè)面中間最大的元素
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;再創(chuàng)建一個(gè)保存內(nèi)容步驟，勾選“保存網(wǎng)頁(yè)內(nèi)容”，選擇“下載圖文單個(gè)文件”。設(shè)置文件名為js變量title，即標(biāo)題做為文件名，并指定保存文件路徑為“D:\文檔”。在窗口下方設(shè)置正文的元素，通過(guò)js代碼獲得。
保存圖文到文件
document.getElementById("mutoubrowser");最后保存項(xiàng)目文件為“AI保存網(wǎng)頁(yè)”，通過(guò)點(diǎn)擊書(shū)簽按鈕運(yùn)行這個(gè)項(xiàng)目，就能智能識(shí)別網(wǎng)頁(yè)標(biāo)題和正文，保存網(wǎng)頁(yè)有效內(nèi)容和圖片了。
好，我們經(jīng)常上網(wǎng)的用戶一般都會(huì)收藏對(duì)自己有用的網(wǎng)址，并將其存放在瀏覽器的收藏夾中，以便日常使用。在重裝系統(tǒng)前，需要備份好IE收藏夾，待系統(tǒng)安裝完成后可將其重新導(dǎo)入到IE瀏覽器中，我們之前收藏的網(wǎng)址又回來(lái)了。
備份IE收藏夾的具體操作方法如下：
1 選擇“導(dǎo)入和導(dǎo)出”命令
打開(kāi)IE瀏覽器，選擇“文件”|“導(dǎo)入和導(dǎo)出”命令，如下圖所示。
2 導(dǎo)出到文件
彈出對(duì)話框，選中“導(dǎo)出到文件”單選按鈕，單擊“下一步”按鈕，如下圖所示。
3 選擇要導(dǎo)出的內(nèi)容
選中“收藏夾”復(fù)選框，單擊“下一步”按鈕，如下圖所示。
4 選擇導(dǎo)出文件夾
選擇需要導(dǎo)出的文件夾，單擊“下一步”按鈕，如下圖所示。
5 單擊“瀏覽”按鈕
輸入文件路徑或單擊“瀏覽”按鈕，如右圖所示。
6 設(shè)置導(dǎo)出位置
彈出對(duì)話框，選擇導(dǎo)出收藏夾的位置，單擊“保存”按鈕，如下圖所示。
7 單擊“導(dǎo)出”按鈕
返回“導(dǎo)入/導(dǎo)出設(shè)置”對(duì)話框，單擊“導(dǎo)出”按鈕，如下圖所示。
8 導(dǎo)出成功
成功導(dǎo)出了IE收藏夾，單擊“完成”按鈕，如下圖所示。
9 查看導(dǎo)出文件
打開(kāi)目標(biāo)位置，查看導(dǎo)出的文件，如下圖所示。
電腦系統(tǒng)備份IE收藏夾也是經(jīng)常用的，你備份了把它存在U盤(pán)或發(fā)到郵箱中，到其它地方使用電腦時(shí)就能直接導(dǎo)入使用。
頁(yè)中的視頻如何下載到電腦上，你是不是很頭疼？怎么下載保存網(wǎng)頁(yè)中的視頻，特別是網(wǎng)頁(yè)中嵌入的優(yōu)酷、騰訊等其他平臺(tái)的視頻，我們?cè)谌粘５墓ぷ骱蜕钪校貏e是辦公的時(shí)候，瀏覽到某個(gè)網(wǎng)頁(yè)的時(shí)候，感覺(jué)到中間的視頻挺有用的想保存，但是就是找不到下載的地方，即便找到了下載按鈕，也還提示需要下載他們平臺(tái)的客戶端才能下載。
那么有沒(méi)有更好的、更簡(jiǎn)單的方法呢？
今天辦公老師怪哥就教大家一種方法，這個(gè)方法也是辦公師怪哥在網(wǎng)上搜索出來(lái)的方法，親測(cè)有效。一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。
首先，我們隨便找一個(gè)網(wǎng)頁(yè)為例，我隨便點(diǎn)擊一個(gè)鏈接，這是一個(gè)騰訊的網(wǎng)頁(yè)。
我們通常遇到這種網(wǎng)頁(yè)視頻，不知道怎么下載的，如果你是用360瀏覽器打開(kāi)的，有些人會(huì)變通的使用視頻右上角有個(gè)“錄制小視頻”按鈕，這是360瀏覽器自帶的算是一個(gè)插件。但是對(duì)電腦要求有點(diǎn)高，電腦配置低的，錄制出來(lái)后就比較卡頓，也用不成。這其實(shí)也算是一種方法。
我今天教大家的是一種更簡(jiǎn)單的方法。注意看圖例，關(guān)鍵步驟我會(huì)截圖劃圈給大家，便于大家辦公的時(shí)候用。
網(wǎng)頁(yè)中的視頻如何下載到電腦上