js下载文件到本地(js下载文件到本地文件夹) 收藏 0

最新版 GoogleMap API 离线源码下载技术分享

我们曾分享过《基于 GoogleMap 离线API在内网中加载离线卫星地图的方法》一文，在该文中我们分享了将GoogleMap离线API源码部署到本地的方法。

那么这个GoogleMap离线API是从哪里来的呢？

由于它并不像OpenLayers和MapBox等开源平台一样提供源码下载链接，因此只有将GoogleMap相关的JS源代码文件从GoogleMap官方网站解析下载到本地，这样才可以进行离线开发应用。

这里，我们就来分析一下从谷歌官方网站将GoogleMap API 源码离线下载到本地的方法。

通过以下网址打开谷歌官方网站的\”Google地图平台文档\”。

https://developers.google.cn/maps/documentation

Google地图平台文档

由于这里我们需要离线下载的是JS代码，因此选择\”Maps JavaScript API\”，如下图所示。

Map JavaScript API

如果不习惯查看英文文档，在谷歌浏览器中打开后，可以通过点击\”中文（简体）\”查看中文翻译说明，有助于查阅文档。

可选择切换为中文

谷歌官方网的Map JavaScript API文档中，除了提供API调用函数外，还有许多API调用的示例，可以通过点击\”Samples\”进行查看，如下图所示。

API调用示例

我们通过打开浏览器的\”开发者工具\”，可以查看打开示例时需要加载的所有文件。

开发者工具

在开发者工具中，当我们每打开一个示例时，都会显示当前页面中所加载的文件，当前我们只关心需要加载的JS文件。

在所有的JS文件中，只有路径中包括\”zh_cn\”的才是我们需要下载的JS文件，因此需要在过滤器中输入\”zh_cn\”进行过滤，如下图所示。

需要下载的JS文件

在需要保存的JS文件上单击鼠标右键后选择\”Save as…\”保存到本地，如下图所示。

保存JS文件

由于单个示例中并没有加载Google Map API所有的JS文件，但所有示例应该是能完全包括所有Google Map API所有JS文件的，因此我们需要打开每一个示例，将加载的JS文件与已经下载的JS文件作对比，将还没有下载的JS文件保存到本地，如下图所示。

对比保存还未下载的JS文件

以上方法是通过加载每一个示例，并找出不相同的JS文件进行保存，比较费时费力。

为了以后更方便地下载最新版本 Google Map API 的 JS 源代码文件，我们整理好了一个名为\”LoadAllGoogleMapAPIJSFiles.html\”的Web页面，该页面调用了Google Map API 的所有JS文件，只需要在浏览器中打开该页面后并将JS文件分别保存到本地即可，如下图所示。

加载所有JS文件

需要获取\”LoadAllGoogleMapAPIJSFiles.html\”文件，可以通过私信回复\”GetGoogleMapJS\”即可。

现在，我们已经把 Google Map API 所有相关的文件保存到本地了，一共有29个JS文件，如下图所示。

Google Map API 离线 JS 文件

前文讲解了如何获取最新版本 Google Map API 离线源码的方法，现在我们可以用同样的方法通过打开所有 Google Map API 调用示例下载所有的图片资源，如下图所示。

下载图片资源

同样地，如果打开每一个示例去下载图片的工作是比较繁琐的，我们已经把所有图片资源的URL链接放在了一个TXT文档中，如下图所示。

图片资源URL地址

需要获取 Google Map API JS 图片资源 URL 文件，可以通过私信回复\”GetGoogleMapJS\”即可。

需要特别注意的是，下载后的图片资源需要按URL中所示的路径建立相应的文夹进行存储，如下图所示。

图片资源下载结果

到目前为止，我们已经将 Google Map API 的全部JS文件和相关的图片资源文件下载到了本地。

但由于JS文件内部还存在链接到官网的URL，因此需要将代码进行一定的修改。

在\”js.js\”文件中查找\”zh_cn\”,然后将代码\”https://maps.googleapis.com/maps-api-v3/api/js/41/5/intl/zh_cn\”

替换为\”GoogleMapAPI/js\”，目的是为了加载本地的所需功能模块js文件，如下图所示。

修改js.js文件代码

在\”common.js\”文件中搜索\”b,e,f\”，然后在\”function\”函数中加入\”return true;\”，如下图所示。

修改common.js文件代码

现在需要将所有js文件中的网络链接，替换为本地链接。

通过Nodepad++或文字处理软件一次性打开 Google Map API 离线 JS 源代码文件，如下图所示。

打开所有JS文件

将所有js文件中的URL链接\”https://maps.gstatic.com/mapfiles/api-3/\”替换为\”GoogleMapAPI/mapfiles/\”，目的是为了加载本地的图片资源，如下图所示。

源码本地化处理

方法同理，再将所有js文件中的URL链接\”https://maps.gstatic.com/mapfiles/\”替换为\”GoogleMapAPI/mapfiles/\”；将所有js文件中的URL链接\”api-3/images/\”替换为\”GoogleMapAPI/mapfiles/images/\”,目的也是为了加载本地的图片资源。

至此，将 Google Map API 的离线 JS 源码的本地化工作就完成了。

通过以上方法，你可以随时从谷歌官方网站获取最新版本的 Google Map API 离线文件源码，由于 Google Map API 在不断升级，以上具体操作细节可能随着时间的推移多少会有一定出入，但主体思路是不会有太大变化的。

以上获取最新版离线 Goolge Map API 源码的方法仅供参考，如果你有更好的获取方法，欢迎与我们交流并指正！

最后，本文中所提及的全部文档及 Google Map API 最新版 JS 源码，请通过私信回复\”GetGoogleMapJS\”即可获取！

JavaScript HTML5本地存储

本地存储

1 本地存储简介

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

localStorage – 没有时间限制的数据存储

sessionStorage – 针对一个 session 的数据存储

之前, 这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储, 因为它们由每个对服务器的请求来传递, 这使得 cookie 速度很慢而且效率也不高。

HTML5 使用 JavaScript 来存储和访问数据。

2 语法

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后, 数据依然可用。

localStorage 和sessionStorage分别是本地存储和会话存储, 统称本地存储。

存储数据：localStorage.setItem(\’key\’,\’value\’);

读取数据：localStorage.getItem(\’key\’)

删除指定数据：localStorage.removeItem(\’key\’);

清空所有数据：localStorage.clear()

本地存储数据库会自动的为每一个网站(IP地址)建立一个独立的表格, 在同一个网站(IP地址)下数据是可以共享的, 但是不能跨域。

不能跨浏览器存储, 每个浏览器都有自己的小数据库, Chrome存储的, 火狐看不见。

localStorage是简单的数据库, 没有查询功能, 不能用sql操作, 只能简单的存储、读取k-v对。

sessionStorage 浏览器窗口一旦关闭, 数据就丢失了

localStorage存储的数据, 永远不丢失, 关机, 重启都不会导致数据丢失, 除非清除了浏览器记录

注意: 判断localStorage和sessionStorage是否有数据使用if直接判断

不能使用

把HTML网页下载为单文件，可离线访问

把网页下载下来使用，在日常工作中使用频率还是很高的，有时候确实能解一时之急，我自己就有很窘迫的经历。

我开会的时候，都会把准备好的文档存在局域网，到会议室直接打开就能直接用了。有一次到分公司，由于分公司刚刚成立，内网还没有和母公司连通。结果这下子懵逼了，上不去内网，看不到文档。又是叫同事发过来，又是提发送文件的安全申请，让人着急。

如果把网站保存下来，放在自己的电脑中，既不用担心信息泄露问题，又不用为了看不了文档而着急。

遇到问题，记录下来，然后解决问题，程序员的解决思路永远是自己创造轮子的，接下来就是不断的探索解决方案。

其实下载网页的方式有很多种，其中有几种办法使用的比较多，例如：如果你用Chrome，直接按 Ctrl+s 就可实现。使用这种方法，Chrome会把整个网站，按照编译完成的源码目录结构保存下来。像下面这样：

下载完成的文件直接点击 xxx.html 可以直接离线访问，但是这种方式对目录的依赖结构比较高，怎么理解呢？就是 html 文件和对应文件名的文件夹必须在同一个目录中，才能正常使用。拷贝到其他机器的时候必须要两个同时拷贝才可以，否则就会排版错乱。

如果有十个或者更多的网页需要拷贝或者删除，就会很麻烦，例如我想在其中找到其中几个，复制到其他地方，很容易弄错顺序。

HTML 是一种纯文本格式，它用于排版文字。纯文本文档的意思就是，文档中只包含文字内容，不包含二进制内容，举个例子：打印出的A4纸，只有文字没有图片。而 HTML 想要显示照片等二进制信息，通常都会链接到其他文件，也就是上面文件夹里面的内容。

不过 Chrome 下载文件这种方式也有优点，下载下来的文件可以保持独立性，比如说，我需要这个网页中的一张图片，那么就可以直接到文件夹里面寻找了。

另外还有一种办法，也有很多人再使用。Chrome 在打印网页的时候，会把网页转成 PDF ，然后在进行打印。那么就给我们提供了很明确的思路，把网页直接保存为 PDF ，这样保存下来的网页就只有一个文件。

使用Chrome，直接按下Ctrl+p就可以。然后目标打印机选择 另存为 PDF 。

这个功能很多浏览器都支持

但是这种办法也有很明显的缺点，由于 PDF 是静态文档，网页上的一些动画可能不会正常显示，而且排版也有可能会错乱，这完全靠运气。个人觉得这不是一种很靠谱的方法。

这时候主角来了！有一个工具既可以把网页保存为 html 又可以保持是单文件。他就是 monolith ，你可以在 github 上面找到它，但是源码并没有编译为可执行文件，我把它编译了一下，下面会放上来链接，https://github.com/leconio/Repos/raw/master/monolith.7z。

那么下面就简单说说使用方法：如果你下载我的链接，那么里面有三个文件：

第一个是Mac平台编译出来的，使用方式为：

默认情况下 monolith 会把生成的 html 输出到标准输出流，也就是当前终端。使用 > 我们把输出的内容重定向并覆盖到文件。

执行完成之后，在这个目录下面就会有一个对应的文件：xxx.html 。

另外两个是 Windows 平台使用的。为了简化使用，我写了一个 CMD 脚本。直接点击 monolith.cmd ，然后粘贴地址就可以完成下载。

下载完成之后，在本地你会发现只有一个 html 文件。我们打开之后，发现图片和JS等信息都在，而且排版正常。那么就要思考了，我们之前说过，HTML 是放置纯文本信息的，那么图片在哪里呢？

答案显而易见，就在 HTML 文件里面。为了方便小图片传输，有一种叫 Base64 的东西，它可以把二进制信息变成成纯文本。这在使用 Json 传递数据的今天十分常见，它可以减少一次请求（题外话），这里就是用的这个原理。monolith 把图片等二进制内容转为了纯文本，保存在 HTML 文件中。我们在下载的文件源码可以看到：

对比源代码，src 信息已经变成了 base64 格式的图片，就是那串乱码。复制那串乱码，从网上搜一个 base64 转图片工具，粘贴进去，这时会发现就是我们看到的那张图片。这样一来，无论这个网站上有多少个文件，都会保存到一个 HTML 文件里面，而且还能离线使用。

当然，base64 编码的图片比原生图片略大，这可能也是你现在在担心的问题。不过 monolith 会特殊处理文件体积。我们可以看看 Chrome 直接下载和使用 monolith 下载体积相差多少。我们把两种方式下载的网页都进行了 7-Zip 压缩。

我们可以看到，使用 monolith 下载会比 Chrome 直接下载小一倍还多！

最后要说的是局限性，无论那种方法，都几乎不能把视频网站中的视频下载下来。因为现在的视频地址都是 Token 加密的，同理，使用 Token 加密的其他请求信息也无法下载。

比如你可以试试下载其他网站的首页，Logo 和视频都是下载不了的。但是也有解决办法，那就是另外一个领域的事情了，以后有机会说给大家听。

如果这篇文章对您或者您的朋友有帮助，感谢您关注，转发。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com