vue3如何实现前端对网络路径的附件文件的点击下载呢？使用a标签，有同源限制，且图片和txt格式文件点击是打开预览而不是下载？

  • Z时代
  • 2024-02-25
  • 分类：IT

vue3如何实现前端对网络路径的附件文件的点击下载呢？
使用a标签，有同源限制，并且图片和txt格式文件点击是打开预览而不是下载。
请问有无好的前端实现方法呢？(考虑兼容比较大的视频格式文件下载)

回答：

如果说是同源的资源，可以 a 标签的 download 属性。?HTML \<a> download 属性。

如果说资源来源不确定的，可以考虑用 downloads.download() | MDN(有兼容问题) 和 URL.createObjectURL() - Web API 接口参考 | MDN 两种方式来做。
具体方案可以参考这篇文章 前端 javascript 实现文件下载

回答：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件操作</title>
</head>
<body>
    <div id="main">
        <input type="button" id="exportTxt" value="txt下载" />
        <input type="button" id="exportPng" value="图片下载" />
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <script type="text/javascript">
        var exportTxt = document.getElementById("exportTxt");
        exportTxt.addEventListener("click", function (ev) {
            saveAs("https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js", "test.txt");
        });
        var exportPng = document.getElementById("exportPng");
        exportPng.addEventListener("click", function (ev) {
            saveAs("/wp-content/uploads/new2024/02/20240204vue1234/qr-code-common.fff548d02149.jpg", "image.jpg");
        });
    </script>
</body>
</html>

以上是 vue3如何实现前端对网络路径的附件文件的点击下载呢？使用a标签，有同源限制，且图片和txt格式文件点击是打开预览而不是下载？ 的全部内容， 来源链接： utcz.com/p/933706.html

回到顶部