vue读取文件显示到前端下载

你可以使用HTML5的`<a>`标签和`download`属性来实现这个功能。以下是一个简单的示例：

<template>
  <div>
    <button @click="downloadFile">下载文件</button>
  </div>
</template>

<script>
export default {
  methods: {
    downloadFile() {
      const fileUrl = 'http://example.com/files/example.pdf'; // 文件的URL地址
      fetch(fileUrl).then(response => {
        return response.blob();
      }).then(blob => {
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = 'example.pdf'; // 文件的名称
        link.click();
      });
    }
  }
}
</script>

当用户点击“下载文件”按钮时，`downloadFile`方法会从服务器获取文件并将其转换为Blob对象，然后创建一个URL并将其分配给`<a>`标签的`href`属性。将文件名分配给`<a>`标签的`download`属性，这将提示用户将文件保存在本地。最后，调用`click`方法触发下载。