我希望能够跟踪Vue项目中的文件下载,目标是提供一个类似mysite.com/some/path/file-name.txt/tracking-source的url,执行类似发送路径到跟踪API的操作,然后在mysite.com/some/path/file-name.txt提供文件我尝试使用重定向,但它似乎不提供文件下载,它只是更新浏览器中的路径。
mysite.com/some/path/file-name.txt/tracking-source
mysite.com/some/path/file-name.txt
xdyibdwo1#
使用捕获“tracking-source”参数并执行必要的跟踪操作的路径,然后使用来自Express库的sendFile方法提供文件。以下是如何使用vue-router库在Vue项目中设置路由的示例:
import Vue from 'vue' import Router from 'vue-router' import path from 'path' import express from 'express' Vue.use(Router) const router = new Router({ routes: [ { path: '/some/path/:fileName/:trackingSource', name: 'download-file', component: { beforeRouteEnter (to, from, next) { const { params } = to // Perform tracking action using the trackingSource parameter // ... // Serve the file const filePath = path.join(__dirname, 'path/to/files', `${params.fileName}.txt`) express.sendFile(filePath, (err) => { if (err) next(err) }) } } } ] })
这里,路由从URL捕获“fileName”和“trackingSource”参数,并且使用beforeRouteEnter导航保护来执行跟踪动作并服务于文件。不用表达你也能做这样的事
<template> <div> <a ref="downloadLink" :href="fileUrl" download>Download</a> <button @click="downloadFile">Download</button> </div> </template> <script> export default { data() { return { fileUrl: '' } }, methods: { async downloadFile() { const { params } = this.$route const fileName = `${params.fileName}.txt` const filePath = `/path/to/files/${fileName}` const response = await fetch(filePath) if (!response.ok) { throw new Error(`Failed to fetch file: ${response.status}`) } const blob = await response.blob() this.fileUrl = window.URL.createObjectURL(blob) this.$refs.downloadLink.click() } } } </script>
1条答案
按热度按时间xdyibdwo1#
使用捕获“tracking-source”参数并执行必要的跟踪操作的路径,然后使用来自Express库的sendFile方法提供文件。
以下是如何使用vue-router库在Vue项目中设置路由的示例:
这里,路由从URL捕获“fileName”和“trackingSource”参数,并且使用beforeRouteEnter导航保护来执行跟踪动作并服务于文件。
不用表达你也能做这样的事