js实现pdf、excel文件无预览直接下载

          // pdf、xlsx或其他文件无预览下载
          const url = ‘你的文件url链接’
          let fileName = url.substring(url.lastIndexOf('/') + 1)
          console.log("fileName--",fileName)
          let isPdf = url.endsWith('.pdf')
          const request = new XMLHttpRequest();
          request.responseType = 'blob';
          request.open('GET', res.data.url);
          request.onload = function () {
            const link = document.createElement('a');
            document.body.appendChild(link);
            this.response.arrayBuffer().then(buf => {
              const blob = new Blob([buf]);
              const url = URL.createObjectURL(blob);
              link.style.display = 'none';
              link.target = '_blank';
              link.download = fileName;
              link.href = url;
              link.click();
              document.body.removeChild(link);
              window.URL.revokeObjectURL(url);
            });
          };
          request.send();

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue应用中实现本地Word(.docx)、Excel(.xlsx)和PDF文件,你可以使用一些现有的库和插件。以下是一种常见的方法,使用`vue-pdf`、`xlsx`和`mammoth.js`库来实现此功能: 1. 首先,安装所需的库: ```bash npm install vue-pdf xlsx mammoth ``` 2. 创建一个Vue组件,并导入所需的库: ```vue <template> <div> <div v-if="fileType === 'pdf'"> <pdf :src="fileUrl" /> </div> <div v-else-if="fileType === 'xlsx'"> <div>{{ excelData }}</div> </div> <div v-else-if="fileType === 'docx'"> <div v-html="wordContent"></div> </div> </div> </template> <script> import { read, utils } from 'xlsx'; import mammoth from 'mammoth'; import { pdf } from 'vue-pdf'; export default { components: { pdf, }, data() { return { fileType: '', fileUrl: '', excelData: [], wordContent: '', }; }, mounted() { this.loadFile(); }, methods: { loadFile() { const file = 'path/to/your/file'; const extension = file.split('.').pop(); if (extension === 'pdf') { this.fileType = 'pdf'; this.fileUrl = file; } else if (extension === 'xlsx') { this.fileType = 'xlsx'; this.loadExcelFile(file); } else if (extension === 'docx') { this.fileType = 'docx'; this.loadWordFile(file); } }, loadExcelFile(file) { const reader = new FileReader(); reader.onload = (e) => { const data = new Uint8Array(e.target.result); const workbook = read(data, { type: 'array' }); const worksheet = workbook.Sheets[workbook.SheetNames[0]]; this.excelData = utils.sheet_to_json(worksheet, { header: 1 }); }; reader.readAsArrayBuffer(file); }, loadWordFile(file) { const reader = new FileReader(); reader.onload = (e) => { const arrayBuffer = e.target.result; const options = {}; mammoth.extractRawText({ arrayBuffer }, options) .then((result) => { this.wordContent = result.value; }) .catch((error) => { console.error(error); }); }; reader.readAsArrayBuffer(file); }, }, }; </script> ``` 在上面的代码中,你需要将`path/to/your/file`替换为实际文件的路径。根据文件的扩展名,组件将显示不同的方式。 请注意,该示例仅提供了一种基本实现方法。你可以根据自己的需求进行修改和调整。 希望这可以帮助到你!如果你有其他问题,请随时提问。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值