纯前端实现：下载电子书手机观看-优快云博客

本文链接：https://blog.youkuaiyun.com/Lakeson/article/details/119063553

该博客介绍了如何利用Vue-cli搭建项目并配置跨域，以实现从指定网站抓取文章内容并生成本地文件。文件通过JavaScript的download函数下载，并上传至微信云存储。之后在微信小程序中读取云服务内容，展示电子书。整个过程无需服务器参与，用户可在手机上通过微信小程序浏览电子书。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

个人需求：在pc下载电子书，在手机上看

几个关键步骤：

vue-cli搭建项目，配置跨域，实现目标网址的文章截取
每篇文章，通过在浏览器中生成文件，无需接触任何服务器。这样我们会得到很多个文件，保存在自己的本地文件夹中。（注意把浏览器的”下载前询问每个文件的保存位置“选项置为否，不然每次都要询问。）

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);
 
  element.style.display = 'none';
  document.body.appendChild(element);
 
  element.click();
 
  document.body.removeChild(element);
}
 
 
download("hello.txt","This is the content of my file :)");

把这个文件夹上传到微信的存储空间
新建微信小程序项目，读取微信云服务里的内容

wx.cloud.downloadFile({
      fileID:
        "test/第18章.html", // 文件 ID
      success: (res) => {
        // 返回临时文件路径
        let tempFilePath = res.tempFilePath;
        let fs = wx.getFileSystemManager();
        let result = fs.readFileSync(tempFilePath, "utf-8");
        // 读取文件内容到result
        this.setData({
          html2: result,
        });
      },
      fail: console.error,
    });