记录工作
如果要通过点击下载模板时下载本地 PSD 文件,需要确保该 PSD 文件在服务器上是可访问的。假设 PSD 文件的路径为:@/assets/模板demo.psd。
<a style="color: #29d3f8" @click="downLoadFun">下载模板demo</a>
// 下载模板demo
const downLoadFun = () => {
const fileUrl = "../../public/模板demo.psd"; // 本地 PSD 文件的路径
const link = document.createElement("a");
link.href = fileUrl; // 替换为你的 PSD 文件路径
link.download = "模板demo.psd"; // 下载时的文件名
document.body.appendChild(link); // 将链接元素添加到页面中
link.click();
document.body.removeChild(link); // 下载完成后移除链接元素
};
如果希望从网站上提取文件,而不是使用相对路径,可以考虑将本地文件转换为 base64 编码的数据URL。这样,就可以在前端直接使用这个数据URL进行下载。
<a style="color: #29d3f8" @click="downLoadFun">下载模板demo</a> <script> const downLoadFun = () => { const fileUrl = "../../public/模板demo.psd"; // 本地 PSD 文件的路径 // 使用 fetch 方式加载本地文件并转换为base64 fetch(fileUrl) .then(response => response.blob()) .then(blob => { const reader = new FileReader(); reader.onload = () => { const base64DataUrl = reader.result; // 创建一个虚拟的下载链接 const downloadLink = document.createElement("a"); downloadLink.href = base64DataUrl; // 设置下载链接的地址为 base64 编码的数据URL downloadLink.download = "模板demo.psd"; // 下载的文件名可以自定义 document.body.appendChild(downloadLink); downloadLink.click(); // 模拟点击下载 document.body.removeChild(downloadLink); // 下载完成后移除链接 }; reader.readAsDataURL(blob); }) .catch(error => console.error("下载失败", error)); }; </script>
使用了 fetch
来加载本地文件并将其转换为 base64 编码的数据URL。再创建一个下载链接,并设置其 href
属性为这个数据URL。用户点击下载按钮时,就会触发下载操作。