javascript - 为任何文件类型 JS 创建下载链接

Question

我有一个存储一些文件的页面。
这些文件可能有所不同:.pdf、.csv、.jpg、.doc、.png 、.xlsx。
我想要每个文件都有一个下载按钮，可以直接下载文件。
我还想在下载时给它们一个自定义名称。
我正在使用 PHP 脚本循环浏览我保存的文件。
我正在为每个文件保存一个随机名称和数据库内的原始名称。
我想使用文件的原始名称而不是随机名称下载每个文件。
我尝试使用在堆栈上找到的这个脚本来下载文件并重命名它。

function downloadfile(url, name) {
    var a = document.createElement("a");
    a.href = url;
    a.download = name;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

但这似乎不适用于 .csv 或 .pdf 类型文件。
当我单击应下载 .pdf 文件的链接时，它会在浏览器中打开该文件。
对于其他文件类型，它根本不会重命名。
JS 中是否有一个函数可以下载具有自定义名称的每个文件扩展名？

Answer 1

您可以通过 setting the Content-Disposition header 在 PHP 中执行此操作:

<?php

$mimeType = mime_content_type($fileName);

header("Content-disposition: attachment; filename=$originalName");
header("Content-type: $mimeType");
readfile($fileName);

注意:我使用 mime_content_type() 添加了动态生成的 mime 类型到链接的示例。

然后将下载按钮链接到此脚本并向其传递应下载的特定文件，然后设置 $fileName 和 $originalName 变量。

<a href="downloadFile.php?file=1">Download</a>

在脚本中(伪代码):

$row = // select * from files where id = $_GET['id']
// or 
$row = // select * from files where name = $_GET['name']

// add your column names
$fileName = $row->fileName;
$originalName = $row->originalName;