Sciter实现文件下载

最新推荐文章于 2024-05-12 09:48:20 发布

Ustinian007

最新推荐文章于 2024-05-12 09:48:20 发布

阅读量391

点赞数

分类专栏： Sciter 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Th_rob/article/details/128717806

版权

Sciter 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Sciter实现文件下载

前言

这段事件在进行Sciter方面的学习，leader给的一个小需求-----输入一段url实现文件下载，故记录下自己实现的一个过程。

介绍

首先，Sciter是一个强大的可嵌入的 HTML/CSS/JavaScript 引擎。作为一个前端小菜鸟，对三件套还算熟悉（实则a litter litter），上手Sciter还是比较容易的。从所周知，前端的文件下载可以分为以下几种：

利用**** 标签来进行下载，适用于浏览器支持的文件格式，例如：html、jpg、png、pdf等，代码简单，但不支持远端跨域下载。
通过数据流的方式来下载，例如：发起一个get请求后端接口，将返回的二进制流（blob、arraybuffer）写入到文件中。
利用第三方插件来下载，例如：download.js

在Sciter不支持<a>标签实现、无blob对象以及对第三方插件的兼容性不好。经过本人的多次测试，通过Sciter 自身封装的fetch接口来下载文件最合适。

实现过程

首先，先绘制出一个基本的页面，sciter的语法和原生的有一些区别，大部分原生的东西还是支持的，具体可以去看官方文档，html的结构代码如下：

<!-- main.htm -->

<body>
    <form>
        <div class="form-item">
            <div class="form-item-label">
                <label>url：</label>
            </div>
            <div class="form-item-control">
                <input #urlInput type="text" style="width: 500px;" />
            </div>
        </div>
    </form>
    <div class="form-item">
        <button #download>download</button>
    </div>
    <pre#out />
    <plaintext />
</body>

在这里插入图片描述

创建一个main.js文件,来存放我们的js代码，然后再main.htm中引入我们的代码

<script|module src="./main.js"></script>

点击按钮下载

document.on("click", 'button#download', () => {
    let url = document.$("input#urlInput").value; // 获取url
    download(url); // 下载文件
})

fetch()接口,可以穿入两个参数一个是url请求路径，还有options(可选)可以配置请求头等等一些信息，此外sciter对fetch()进行了封装提供了downloadProgress()函数来获取下载进度。

const options = {
    downloadProgress: (loaded, total) => {
        outText(`loaded----${loaded},total----${total}`);
    }
}
async function download(url) {
    const res = await fetch(url, options);
    savingFile(res, path); // 文件保存
}
// 输出到面板中
function outText(str) {
    let plaint = document.$("plaintext");
    plaint.append(str);
}

输入url,点击按钮,效果图：

在这里插入图片描述

保存文件

import * as sys from "@sys"; // 引入sciter扩展模块

async function savingFile(res) {
    // 保存路径
    let path = URL.toPath(__DIR__ + 'Yuque-2.2.5.exe')
    // 在该路径下载打开一个文件（若文件不存在,则会创建）
    let fs = await sys.fs.open(path, '+w');
    // 写入文件，通过数据流的方式写入到文件中
    await fs.write(res.arrayBuffer());
    // 关闭文件
    await fs.close();
}

测试

在这里插入图片描述

总结

代码比较简单，主要提供大家参考即可，大家可以根据自己的需求加入自己的想法，例如：错误处理、界面美化等等。此外，该方法下载会有一个缺陷，那就是在sciter设置的默认http请求最大上限为128MB，要修改该值只能通过修改c++代码，具体可以看官方论坛作者的回复Topic: samples\communication\file-download.htm / sciter

在这里插入图片描述

ps：有关于sciter大文件的下载，这里还有一种方案，采用分片下载的方式，即发起多次http请求来分段下载资源，但这种方案只适合后端要支持断点续传的情况。

代码

<!-- main.htm -->
<html>
<meta charset="UTF-8">
<head>
    <title>resource download tools</title>
    <style>
        .form-item {
            flow: horizontal;
            margin-bottom: 10px;
        }

        plaintext {
            margin-top: 10px;
        }
    </style>
    <script|module src="./main.js"></script>
</head>
<body>
    <form>
        <div class="form-item">
            <div class="form-item-label">
                <label>url：</label>
            </div>
            <div class="form-item-control">
                <input #urlInput type="text" style="width: 500px;" />
            </div>
        </div>
    </form>
    <div class="form-item">
        <button #download>download</button>
    </div>
    <pre#out />
    <plaintext />
</body>
</html>

// main.js
import * as sys from "@sys";// 引入sciter扩展模块

// download配置
const options = {
    downloadProgress: (loaded, total) => {
        outText(`loaded----${loaded},total----${total}`);
    }
}

document.on("click", 'button#download', () => {
    let url = document.$("input#urlInput").value; // 获取url
    download(url); // 下载文件
})

async function download(url) {
    const res = await fetch(url, options);
    savingFile(res); // 文件保存
}

async function savingFile(res) {
    // 保存路径
    let path = URL.toPath(__DIR__ + 'Yuque-2.2.5.exe')
    // 在该路径下载打开一个文件（若文件不存在,则会创建）
    let fs = await sys.fs.open(path, '+w');
    // 写入文件，通过数据流的方式写入到文件中
    await fs.write(res.arrayBuffer());
    // 关闭文件
    await fs.close();
}

// 输出到面板中
function outText(str) {
    let plaint = document.$("plaintext");
    plaint.value += str + '\n';
}