ボタンをクリックしてファイルをダウンロードする機能を実現するHTML JSの例（C版）

実際、この記事は「水」の記事と見なされるべきです。なぜそんなに「水」なのでしょうか? 最近の南部の蒸し暑い気候に涼しさを必要としていることに加えて、もう 1 つの主な理由は、ここに書かれているコードが次のようなものであることです。すべて CSDN が作成 AI テキスト「C は知っている」という大きなモデルが完成しました。ここでは簡単に記録します。また、必要な他の学生がそこから学び、いくつかの回り道を避けるのに便利です (いくつかの回り道はまだ必要です)自分で迂回します）。CSDN の AI テキストモデルは、数か月前にリリースされたばかりです。私も数回経験しましたが、効果は良好です。研究でも作業プロセスでも、さまざまな技術的な質問に対する答えは非常に満足です。役に立ちます。私たちの多くは、ありがとう！

著者は C のバックグラウンドを持っており、フロントエンドのコンテンツは、プロジェクトが必要な場合にのみオンラインで利用できます。比較的単純で人気のある質問に対して、後で参照できる適切で満足のいく回答がない場合があります。「百度がたくさんあります。一部の記事やブログは、これらの簡単で人気のある質問にもさまざまな閲覧制限を設定します。メンバーシップに参加したり、VIPを開いたり、ブロガーに注意したりするのは非常に不便です。」、以下の内容は一例であり、最後の内容ですまだ注意が必要な点は、ワインはおいしいですが、欲張らないでください。

ボタンをクリックしてファイルをダウンロードする例を実装します。

<!DOCTYPE html>
<html>
<head>
  <title>文件下载示例</title>
</head>
<body>
  <button onclick="downloadFile()">点击下载文件</button>

  <script>
    function downloadFile() {
      // 创建一个虚拟的链接元素
      var downloadLink = document.createElement('a');
      downloadLink.href = 'path/to/your/file';  // 替换为你要下载的文件路径
      
      // 设置下载文件的名称
      downloadLink.download = 'filename.ext';  // 替换为你要下载的文件名称（包括扩展名）
      
      // 触发点击事件进行下载
      downloadLink.click();
    }
  </script>
</body>
</html>

上記を踏まえて、ボタンをクリックして固定の拡張子を持つファイルをダウンロードする機能を実現します。

<!DOCTYPE html>
<html>
<head>
  <title>文件下载示例</title>
</head>
<body>
  <button onclick="downloadFile()">点击下载文件</button>

  <script>
    function downloadFile() {
      var fileUrl = 'path/to/your/file';  // 替换为你要下载的文件路径
      var fileName = 'filename.ext';  // 替换为你要下载的文件名称（包括扩展名）
      
      // 获取文件的后缀名
      var fileExtension = fileName.split('.').pop();
      
      // 判断文件后缀名是否符合条件（这里以 .dat 和 .txt 为例）
      if (fileExtension === 'dat' || fileExtension === 'txt') {
        // 创建一个虚拟的链接元素
        var downloadLink = document.createElement('a');
        downloadLink.href = fileUrl;
        downloadLink.download = fileName;
        downloadLink.click();
      } else {
        alert('只能下载 .dat 或者 .txt 文件');
      }
    }
  </script>
</body>
</html>

上記に基づいてボタンをクリックして複数のファイルをダウンロードする例

<!DOCTYPE html>
<html>
<head>
    <title>下载多个文件示例</title>
</head>
<body>
    <h1>点击按钮同时下载多个文件</h1>

    <button onclick="downloadFiles()">点击下载文件</button>

    <script>
        function downloadFiles() {
            // 定义要下载的文件URL和名称
            var files = [
                { url: 'path/to/file1.ext', name: 'filename1.ext' },
                { url: 'path/to/file2.ext', name: 'filename2.ext' },
                // 添加更多文件...
            ];

            // 创建一个隐藏的<a>元素并添加到页面中
            var link = document.createElement('a');
            link.style.display = 'none';
            document.body.appendChild(link);

            // 循环遍历文件数组，并依次下载文件
            for (var i = 0; i < files.length; i++) {
                var file = files[i];

                // 设置文件的URL和名称
                link.href = file.url;
                link.download = file.name;

                // 模拟用户点击下载链接
                link.click();
            }

            // 清理临时元素
            document.body.removeChild(link);
        }
    </script>
</body>
</html>

注意すべき点は、前回の記事で述べた組み込み Linux 環境での boa Web サーバーの移植など、組み込み Linux で WEB サーバーを構築する場合、埋め込まれた boa.conf に対応するパスを変更する必要があることです。環境、

たとえば、私の boa.conf の対応する内容は次のとおりです。

Alias /doc /mnt3/ga_syslog
Alias /ocr /mnt3/ga01_zynq_log

typedef と同様にエイリアスを複数行追加できます。html でパスを記述する場合は、「doc/xxx.log」、「ocr/xxx.log」などにすることができ、再起動後に確認します。ファイルをダウンロードできません。

上記を踏まえ、ファイル閲覧ウィンドウでダウンロードするファイルを選択するボタンをクリックする例

<!DOCTYPE html>
<html>
<head>
  <title>选择文件下载示例</title>
</head>
<body>
  <button onclick="selectAndDownloadFile()">点击选择文件并下载</button>

  <script>
    function selectAndDownloadFile() {
      // 创建一个虚拟的 input 元素
      var fileInput = document.createElement('input');
      fileInput.type = 'file';
      
      // 监听文件选择事件
      fileInput.onchange = function(event) {
        var selectedFile = event.target.files[0];
        
        // 创建一个虚拟的链接元素
        var downloadLink = document.createElement('a');
        downloadLink.href = URL.createObjectURL(selectedFile);
        downloadLink.download = selectedFile.name;
        
        // 触发点击事件进行下载
        downloadLink.click();
        
        // 清除临时的 URL 对象
        URL.revokeObjectURL(downloadLink.href);
      };
      
      // 触发点击事件选择文件
      fileInput.click();
    }
  </script>
</body>
</html>

上記に基づいて、固定サフィックスを持つファイルのみがファイルウィンドウに表示され、ダウンロード用に選択できることがわかります。

<!DOCTYPE html>
<html>
<head>
  <title>选择指定后缀文件下载示例</title>
</head>
<body>
  <button onclick="selectAndDownloadFile()">点击选择 .pdf 文件并下载</button>

  <script>
    function selectAndDownloadFile() {
      // 创建一个虚拟的 input 元素
      var fileInput = document.createElement('input');
      fileInput.type = 'file';
      fileInput.accept = '.pdf';  // 只接受 .pdf 文件，如多种后缀，可以以逗号分隔，如'.pdf,.dat'
      
      // 监听文件选择事件
      fileInput.onchange = function(event) {
        var selectedFile = event.target.files[0];
        
        // 创建一个虚拟的链接元素
        var downloadLink = document.createElement('a');
        downloadLink.href = URL.createObjectURL(selectedFile);
        downloadLink.download = selectedFile.name;
        
        // 触发点击事件进行下载
        downloadLink.click();
        
        // 清除临时的 URL 对象
        URL.revokeObjectURL(downloadLink.href);
      };
      
      // 触发点击事件选择文件
      fileInput.click();
    }
  </script>
</body>
</html>

ボタンをクリックしてファイルをダウンロードする機能を実現するHTML JSの例（C版）

おすすめ