HTML怎么保存文件到本地?

html-css05

HTML怎么保存文件到本地?,第1张

继续复制我之前的答案。

其实在浏览器里面是不行的。因为浏览器为了安全并没有给前端访问本地资源的权限,但是可以通过浏览器 API 下载的方式来将内容保存成本地 TXT 文件。

不过像这种不同浏览器有不同 API 的东西,自己太麻烦了,我曾经用过 FileSaver.js 这个库来下载过在金山词霸上的错词表,自己读取表单内容在 js 里拼装成你想要的样子然后调用库就行了,很方便。

官方实例:

var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plaincharset=utf-8"})

saveAs(file)

上面示例会保存 “Hello, world!” 到 hello world.txt 文件,你想要 a.htm 就把第二个参数改成 a.htm 就成。

补充一下可能完全的不需要的内容,关于如何获取某元素的内容:

1.保存本页面

2.保存当前页面中iframe页面里面的html;

js如何获取iframe页面内的对象,注意地方:

需要在服务器下运行;

父级页面须保证页面内容加载完毕,即js获取iframe页面内容需要在window.onload中写

方法1:本地浏览器保存

01

现今的PC端浏览器都自带将网页保存到本地的功能,将网页的静态网页HTML文件保存,附带着一个存放图片和样式的文件夹。

下面以常见的主流浏览器为例演示,如何将网页保存到本地。

先以Chrome和IE为例

在已打开网页的情况下,

Chrome浏览器右边网址框后的下拉菜单,选择“更多工具”“网页另存为”进行保存。

在IE浏览器右上角设置齿轮图标“文件”-“”另存为“将HTML文件保存到本地。

02

保存到本地后,可以看到一个HTML文件,这就是静态页面,还有一个和网页同名的文件夹,里面有许多样式和图片。这样多个文件并不便于存档。

03

对比一下,可以发现存在一些细节丢失和样式改变,这是应为资源保存到本地时丢失样式和素材引起的。