JS如何实现书签导入导出?我是这么做的
创始人
2024-03-21 12:31:43
0

目录

前言

依赖

概览

功能实现

FileSystem:

HTMLSystem:

html-config:

写在最后


前言

使用Node做过爬虫的人应该都知道Cheerio.js模块,其快速灵活的机制,使我们只需要了解JQ就可以轻松上手,是在使用node抓取网页数据的过程中不可或缺的一员。

了解了cheerio后,我突发奇想:干脆拿cheerio实现个书签的导入吧,正好可以熟悉一下它的用法,于是早些时候我使用cheerio+node实现了初版的书签导入功能,将浏览器导出的书签通过前端页面上传到服务端,服务端使用cheerio将html解析成JSON文件,通过接口将数据传递到前端。

然而,当时我并不满意,因为就为了一个接口开了一个node服务,是不是有点大材小用了,我能否靠本地缓存实现一个纯前端的书签预览和导入导出功能?

说干就干,导入书签我借助前端的FileReader类,读取HTML文件,然后再使用cheerio将Dom解析成JSON格式的数据,在前端展示成menu形式;导出书签同样使用cheerio根据JSON数据生成对应的Dom数据,通过URL.createObjectURL新建文件的本地url地址,最后使用a标签下载文件

下面我分享一下完整的实现过程及源码

依赖

  • utils-lib-js模块

  • cheerio模块

  • vite:3.1

  • vue:3.2

  • element-plus:2.0

概览

这个小案例是基于vite搭建的一个vue-3.0的项目,除了layout之外,案例的核心部分是两个类:
FileSystem和HTMLSystem,前者提供下载,文件读取的功能,后者实现了JSON和HTML互转的功能,除此之外其他的都是常见的布局及组件,所以文章重点描述这两大块

功能实现

FileSystem:

  • 读取文件功能,从element-ui的el-upload组件获取到数据后将结果转换成string格式
  • 下载文件功能,给定url下载静态资源
  • 本地文件转静态地址
import type { UploadFile } from "element-plus/es/components/upload/src/upload.type";
import { defer } from "utils-lib-js";
export type readFileType = 'readAsArrayBuffer' | 'readAsBinaryString' | 'readAsDataURL' | 'readAsText'
export declare interface IFileSystem {readFile: (file: UploadFile, type?: readFileType, encoding?: string) => Promise>downloadFile: (url: string, name?: string) => voidstringToBlobURL: (fileString: string) => string
}
export class FileSystem implements IFileSystem {/*** @name: * @description: 读取前端上传的文件* @param {UploadFile} file 文件* @param {readFileType} type 文件类型* @param {string} encoding 解码方式* @return {Promise>}*/readFile(file: UploadFile, type: readFileType = 'readAsText', encoding: string = 'utf-8') {const { promise, resolve, reject } = defer()const reader: FileReader = new FileReader();reader[type](file.raw, encoding)reader.onload = resolvereader.onerror = rejectreturn >promise}/*** @name: * @description: 下载文件* @param {string} url 资源目录/网址* @param {string} name 下载文件名* @return {*}*/downloadFile(url: string, name: string = 'file.txt') {const link = document.createElement('a')link.href = urllink.download = nameconst _evt = new MouseEvent('click')link.dispatchEvent(_evt)}/*** @name: * @description: 字符串转本地文件* @param {string} fileString 文件内容* @return {*}*/stringToBlobURL(fileString: string) {return URL.createObjectURL(new Blob([fileString], { type: "application/octet-stream" }))}
}

HTMLSystem:

  • HTML转JSON函数,解析dom树,生成JSON数据
  • JSON转HTML函数,通过标准格式生成书签格式的HTML标签

import { load, Cheerio, CheerioAPI, CheerioOptions } from 'cheerio'
import {createHtmlFolder,createHtmlFile,createBaseTemp
} from '@/config'
import { File, Folder } from "@/layout/menu/types";
export declare interface IHTMLSystem, I = CheerioAPI, FolderList = Array> {count: numberresetCount: () => voidinitHTML: (html: string) => FolderListhtmlToJson: (node: T, bookMarks: FolderList) => voidaddToBookMarks: (node: T, list: FolderList) => unknowngetNodeTitle: (node: T) => voidgetNodeInfo: (node: T, info: File) => FilecreateInitHtml: (temp: string, opt?: CheerioOptions, isDoc?: boolean) => IinitJSON: (json: FolderList) => stringjsonToHtml: (bookMarks: FolderList, node: I) => stringcreateFolder: (folder: Folder, node: T) => IcreateFile: (file: File, node: T) => IcreateElemChild: (node: T) => (it: F, i: number) => voidcheckIsFileOrFolder: (item: F) => 'folder' | 'file' | 'none'
}
export class HTMLSystem implements IHTMLSystem {count = 0/*** @name: * @description: 重置id* @return {*}*/resetCount = () => {this.count = 0;};/*** @name: * @description: 递增id* @return {*}*/addCount = () => {return this.count++};/*** @name: * @description: 初始化html生成器* @param {string} html 预加载的html字符文件* @return {Array}*/initHTML(html: string) {const $ = load(html);const dl = $("dl").first();const dt = dl.children("dt").eq(0);return this.htmlToJson(dt, []);}/*** @name: * @description: html转Json的递归函数* @param {Cheerio} node 根节点* @param {Array} bookMarks JSON数据源* @return {Array}*/htmlToJson = (node: Cheerio, bookMarks: Array = []) => {//下一级文件夹目录列表const childrenNodeDL = node.children("dl");const childrenNodeDT = childrenNodeDL.children("dt");const { item: dir, dirType } = this.addToBookMarks(node, bookMarks)childrenNodeDT.map((i) => {const it = childrenNodeDT.eq(i)dirType === 'file' && this.addToBookMarks(it, dir.children)this.htmlToJson(it, dir.children);});return bookMarks;};/*** @name: * @description: 将单个数据添加到JSON中* @param {Cheerio} node 父节点* @param {Array} list 书签JSON数据* @return {, Array, 'folder'|'file'} */addToBookMarks = (node: Cheerio, list: Array = []) => {const item = this.getNodeTitle(node);const dirType = this.checkIsFileOrFolder(item)switch (dirType) {case "folder":item.children = [];case "file":item.id = this.addCount().toString()list.push(item)break;}return { item, list, dirType }}/*** @name: * @description: 判断单个数据是否是文件夹,并解析详细信息* @param {Cheerio} node 文件或文件夹所在的节点* @return {*}*/getNodeTitle = (node: Cheerio) => {const info: any = {};const title = node.children("h3");// 如果h3的length为0则不是文件夹,就获取网站名称和网址,否则是文件夹并赋值title, add_date,last_modifiedreturn title.length === 0 ? this.getNodeInfo(node, info) : {...info,title: title.text(),add_date: title.attr("add_date"),last_modified: title.attr("last_modified")};};/*** @name: * @description: 解析书签文件详细信息* @param {Cheerio} node 文件所在的节点* @return {File}*/getNodeInfo = (node: Cheerio, info: File) => ({...info,name: node.children("a").text(),href: node.children("a").attr("href") ?? '',icon: node.children("a").attr("icon") ?? '',add_date: node.children("a").attr("add_date")})/*** @name: * @description: 入口函数* @param {Array} json 上面生成的书签JSON文件* @return {string}*/initJSON(json: Array) {return this.jsonToHtml(json);}/*** @name: * @description: 生成新标签的CheerioAPI* @param {string} temp 标签* @param {*} opt Cheerio 配置项* @param {*} isDoc 是否生成完整的html标签* @return {CheerioAPI}*/createInitHtml = (temp: string, opt = { xml: true, xmlMode: true }, isDoc = false) => {const $ = load(temp, opt, isDoc);return $}/*** @name: * @description: JSON转书签的主函数* @param {Array} bookMarks 书签的JSON数据* @return {string}*/jsonToHtml = (bookMarks: Array = []) => {const root = this.createInitHtml(`
${createBaseTemp()}
`)("#root")bookMarks.forEach(this.createElemChild(root.children().first()))return root.children().toString()}/*** @name: * @description: 递归生成Dom树* @param {Cheerio} node 父节点* @return {void}*/createElemChild = (node: Cheerio) => (it: Folder | File) => {const type = this.checkIsFileOrFolder(it)switch (type) {case 'folder':const folder = this.createFolder(it as Folder)node.append(folder("*"))//每次都会获取最后一个标签,将子项放进去,防止标签重复遍历it.children.forEach(this.createElemChild(node.children("DL").last()))breakcase 'file':const file = this.createFile(it as File)node.append(file('*'))breakcase 'none':throw new Error('Item is not Folder or File')}}/*** @name: * @description: 生成文件夹标签* @param {Folder} folder 文件夹格式的单个数据* @return {CheerioAPI}*/createFolder = (folder: Folder) => {const init = this.createInitHtml(createHtmlFolder(folder))return init}/*** @name: * @description: 生成文件标签* @param {File} file 文件格式的单个数据* @return {CheerioAPI}*/createFile = (file: File) => {const init = this.createInitHtml(createHtmlFile(file))return init}/*** @name: * @description: 判断是文件还是文件夹格式的数据* @param {Folder} item 单个数据* @return {*}*/checkIsFileOrFolder = (item: Folder | File) => item.title ? 'folder' : item.name ? 'file' : 'none'}

html-config:

此外,生成HTML时,需要一些模板函数


import { File, Folder } from "@/layout/menu/types";
/*** @name: * @description: 书签默认模板* @param {string} 书签名* @return {*}*/
export const createHtmlTemp = (name: string) => `


${name}

${name}

` /*** @name: * @description: 生成文件夹格式的Dom* @param {Folder} folder 文件夹格式数据* @return {*}*/ export const createHtmlFolder = (folder: Folder) => `

${folder.title}

${createBaseTemp()} ` /*** @name: * @description: 生成文件格式的Dom* @param {File} file 文件格式数据* @return {*}*/ export const createHtmlFile = (file: File) => `
${file.name} ` /*** @name: * @description: 列表格式的Dom* @return {*}*/ export const createBaseTemp = () => `

`

写在最后

最终实现效果:BookMarks

源码:book_mark: 纯前端导入导出html书签,生成书签导航

最后,感谢你看到这里,如果文章有帮助到你,还请支持一下博主!

相关内容

热门资讯

乐高乐园保姆级攻略来了!收藏这... 转自:上观新闻来源:上观新闻作者:狄斐流程编辑:u028 ...
特朗普签署“大而美”税收和支出... 新华社纽约7月4日电(记者徐兴堂)美国总统特朗普4日下午签署“大而美”税收和支出法案,标志着这一备受...
权威发布|更大范围释放制度创新... 转自:中工网人民日报记者 王珂日前,国务院印发《关于做好自由贸易试验区全面对接国际高标准经贸规则推进...
00后男大学生购买10粒迷奸药... 昨天(7月4日),记者从厦门市中级人民法院获悉,一名在校男大学生通过某迷奸群聊内卖家购买10粒含三唑...
突发:台湾接连地震 根据台湾气象部门消息,7月5日早晨,台湾花莲外海发生两起地震。第一起地震发生在7时12分,震级4.6...
华福证券迎来新任掌舵人!   炒股就看金麒麟分析师研报,权威,专业,及时,全面,助您挖掘潜力主题机会! 黄德良,男,1973...
吴晓波×李斌:一场关于中国智能... 来源:吴晓波频道CHANNELWU在全球汽车产业加速变革的今天,中国智能电动汽车产业正以惊人的“中国...
哈萨克斯坦“霍尔果斯-东门”无... 来源:新华社新华社阿拉木图7月4日电(记者郑钰)当地时间4日上午,哈萨克斯坦“霍尔果斯-东门”无水港...
云南就业补贴怎么申请(大学毕业... 为了更好地支持大学生创业,营造良好的创业氛围,促进创业和就业,会泽县计划在2021年选择6个大学生创...
小店面适合哪些小生意(创业小本... 现在人们倾向于做一些小生意,所以他们也想让我们推荐他们。所以今天就和大家分享下五个小生意,让大家如果...