原生js下载服务器文件，js和php分别怎么写

原生js下载服务器文件要怎么写呢，js需要怎么写，php里面又应该怎么弄，我自学，搞不明白，有没有朋友帮我写个例子，万分感谢。

您可以在前端使用Ajax请求下载服务器文件。

JavaScript：

var xhr = new XMLHttpRequest();
xhr.open("GET", "/download-file", true);
xhr.responseType = "blob";
xhr.onload = function () {
    if (this.status === 200) {
        var blob = new Blob([this.response], {type: "application/octet-stream"});
        var link = document.createElement("a");
        link.href = window.URL.createObjectURL(blob);
        link.download = "file.txt";
        link.click();
    }
};
xhr.send();

PHP:

<?php
if (isset($_GET['download-file'])) {
    $file = "file.txt";
    header("Content-Type: application/octet-stream");
    header("Content-Disposition: attachment; filename=" . urlencode($file));   
    header("Content-Type: application/download");
    header("Content-Description: File Transfer");            
    header("Content-Length: " . filesize($file));
    flush(); // This doesn't really matter.
    $fp = fopen($file, "r");
    while (!feof($fp))
    {
        echo fread($fp, 65536);
        flush(); // This is essential for large downloads
    } 
    fclose($fp); 
}

这个例子可以帮助您理解原理。希望对您有所帮助！

使用 JavaScript 原生代码下载服务器文件，可以使用 XMLHttpRequest 对象或者 Fetch API：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/file.txt', true);
xhr.responseType = 'blob';
xhr.onload = function (e) {
  if (this.status === 200) {
    var blob = this.response;
    var a = document.createElement('a');
    a.href = window.URL.createObjectURL(blob);
    a.download = 'file.txt';
    a.click();
  }
};
xhr.send();

使用 PHP 下载服务器文件，可以使用 header 函数和 readfile 函数：

<?php
$file = 'path/to/file.txt';

if (file_exists($file)) {
  header('Content-Description: File Transfer');
  header('Content-Type: application/octet-stream');
  header('Content-Disposition: attachment; filename="'.basename($file).'"');
  header('Expires: 0');
  header('Cache-Control: must-revalidate');
  header('Pragma: public');
  header('Content-Length: ' . filesize($file));
  readfile($file);
  exit;
}
?>

原生JS下载服务器文件可以通过创建一个Blob对象并使用URL.createObjectURL方法创建一个临时的下载链接来实现。以下是代码示例：

// JS代码
var xhr = new XMLHttpRequest();
xhr.open("GET", "/path/to/file", true);
xhr.responseType = "blob";
xhr.onload = function () {
    var url = URL.createObjectURL(xhr.response);
    var a = document.createElement("a");
    a.href = url;
    a.download = "file.txt";
    a.click();
};
xhr.send();

在PHP端，可以使用以下代码从服务器获取文件并返回：

// PHP代码
$file = "/path/to/file.txt";
header("Content-Type: application/octet-stream");
header("Content-Disposition: attachment; filename=" . urlencode($file));
header("Content-Type: application/force-download");
header("Content-Length: " . filesize($file));
header("Connection: close");
readfile($file);

在上面的代码中，需要替换“/path/to/file.txt”为下载的文件的路径。

该回答引用ChatGPT

在前端使用原生 JavaScript 下载服务器上的文件，可以使用一个 "a" 标签，并在其 "href" 属性中设置文件地址，并使用 "download" 属性来命名下载的文件名。下面是一个实现的例子：

// 创建 a 标签
var a = document.createElement("a");
// 设置 href 属性，指向服务器上的文件地址
a.href = "https://example.com/files/myfile.pdf";
// 设置 download 属性，命名下载的文件名
a.download = "My File.pdf";
// 模拟单击 a 标签，触发下载
a.click();

在服务端，需要使用 PHP 将文件发送到客户端，可以使用 PHP 的 header 函数发送 HTTP 响应头来实现。下面是一个实现的例子：


// 指定文件路径
$file = "./files/myfile.pdf";
// 设置文件名，用于下载时显示
$file_name = "My File.pdf";

// 设置 HTTP 响应头
header("Content-Type: application/octet-stream");
header("Content-Disposition: attachment; filename=$file_name");
header("Content-Length: " . filesize($file));

// 读取文件内容，并发送到客户端
readfile($file);

方法1：如果后台服务器的静态目录有可供下载的静态资源，后台人员告知你文件路径，直接在前端用js代码window.location.href方式获取即可；
方法2：如果后台服务器无可供下载的静态资源，返回的是一个文件流(response-type: application/octet-stream;charset=UTF-8 )，则使用第二种方式（将文件写入内存，并且创建a元素，a链接href属性指向内存中的文件，download属性指向要下载的文件名，模拟a元素的点击事件，进行下载
方法1不需要php代码，方法2需要，具体可以参考：https://blog.csdn.net/chenzhao635/article/details/128079461

提供参考实例：https://www.fke6.com/html/35707.html

不知道你解决了没有？
如果没有解决，我们可以聊聊。

既然说了原生，肯定就是xhr和php原生了。
另外，还需要考虑你下载什么文件，文件有多大，