js文件下载(xls,xlsx,doc,docx,pdf)各种格式下载,废话不多说直接上代码

8 篇文章 1 订阅
function downloadFile(obj, name, suffix) {
  const DOWNLOAD_TYPE_MAP = {
    xls: 'application/vnd.ms-excel',
    xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    doc: 'application/msword',
    docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    pdf: 'application/pdf'
  }
  if (!DOWNLOAD_TYPE_MAP[suffix]) {
    throw new Error('请传入文件下载的格式后缀,eg:xls,xlsx,doc,docx,pdf')
  }
  const blob = new Blob([obj], {
    type: DOWNLOAD_TYPE_MAP[suffix]
  })
  const fileName = `${name}.${suffix}`
  let link = document.createElement('a')
  document.body.appendChild(link)
  link.href = URL.createObjectURL(blob)
  link.setAttribute('download', fileName)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(link.href) // 销毁url对象
}

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个简单的示例代码,演示如何在Spring Boot和Vue中实现点击查看多种类型文件(包括docdocxxlsxlsxpdf): 1. 后端Spring Boot代码: ```java @RestController @RequestMapping("/api/files") public class FileController { @GetMapping("/{fileName}") public ResponseEntity<Resource> downloadFile(@PathVariable String fileName) throws IOException { // 根据文件名获取文件路径 String filePath = "path/to/files/" + fileName; // 读取文件内容 Path path = Paths.get(filePath); Resource resource = new InputStreamResource(Files.newInputStream(path)); // 设置响应头,让浏览器能够正确解析文件类型 HttpHeaders headers = new HttpHeaders(); headers.add(HttpHeaders.CONTENT_DISPOSITION, "inline; filename=" + fileName); // 返回文件内容和响应头 return ResponseEntity.ok() .headers(headers) .contentType(MediaType.APPLICATION_OCTET_STREAM) .body(resource); } } ``` 2. 前端Vue代码: ```vue <template> <div> <ul> <li v-for="file in files" :key="file.name"> <a @click="viewFile(file.name)">{{ file.name }}</a> </li> </ul> <div v-if="selectedFile"> <iframe :src="selectedFileUrl" width="100%" height="500px"></iframe> </div> </div> </template> <script> import axios from 'axios'; export default { data() { return { files: [], selectedFile: null }; }, methods: { getFileList() { axios.get('/api/files') .then(response => { this.files = response.data; }) .catch(error => { console.error(error); }); }, viewFile(fileName) { this.selectedFile = fileName; } }, computed: { selectedFileUrl() { return `/api/files/${this.selectedFile}`; } }, created() { this.getFileList(); } }; </script> ``` 以上示例中,后端的`FileController`定义了一个GET请求的接口`/api/files/{fileName}`,用于下载文件。前端的Vue组件中,通过调用后端接口获取文件列表,并为每个文件添加点击事件,点击时将文件名赋值给`selectedFile`,然后通过动态生成的URL来展示文件内容。 请根据实际情况修改代码中的文件路径和URL路径。希望对您有所帮助!如有更多问题,请继续提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值