当前位置: 首页 > article >正文

js下载blob二进制文件流 预览

1. 请求头中 要添加 responseType: 'arraybuffer'

// 下载 pdf
        const downloadFile = () => {
            let parameter = {  
                data: {
                    id: props.previewId,
                }
            };
            download(parameter).then((res?: any) => {
                downloadFileBlob(res, props.title, 'application/msword');
            });
        }
        // 下载方法
        function downloadFileBlob(data, name, type) {
            let url = window.URL.createObjectURL(new Blob([data], { type }));
            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = url;
            link.setAttribute('download', name);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link); //下载完成移除元素
            window.URL.revokeObjectURL(url); //释放掉blob对象
        }
// 预览 
const getpdf = ()=>{
      allData.loading=true;
      let parameter = {  
          data: {
              id: props.previewId,
          }
      };
      download(parameter).then((res?: any) => {
            let url = window.URL.createObjectURL(new Blob([res], { type:     'application/pdf' }));
                pdfUrl.value = {
                    cMapUrl: './cmaps/',
                    url: url,
                };
                allData.loading=false;
            });
        }

 使用  vue-pdf-embed  组件

<vue-pdf-embed v-else annotation-layer text-layer :source="pdfUrl" :scale="1" :width="800" :height="800" />


http://www.kler.cn/a/583867.html

相关文章:

  • 瑞芯微RK3588安卓使用fastboot分区烧录
  • 江科大51单片机笔记【12】AT24C02(I2C总线)
  • 浙江大学第四讲:DeepSeek模型优势:算力、成本角度解读(含PPT及直播回放)(文末附链接下载)
  • 前端面试:px 如何转为 rem
  • DrBioRight2.0:用于癌症蛋白组分析的生物学聊天机器人
  • 【Linux篇】进程状态(僵尸进程,孤儿进程),优先级与调度机制
  • 内检实验室lims系统在电子设备制造行业的应用
  • 中小型企业如何利用远程控制方案来降低40%运维成本的
  • 麒麟v10 ARM64架构系统升级mysql数据库从mysql-5.7.27到mysql-8.4.4图文教程
  • Django系列教程(7)——路由配置URLConf
  • 使用AI一步一步实现若依前端(12)
  • 快读模板(Java)
  • 【后端开发面试题】每日 3 题(十二)
  • 【从零开始学习计算机科学】数据库系统(九)DBMS的体系结构
  • 复变函数摘记1
  • 在微信小程序或前端开发中,picker 和 select 都是用户交互中用于选择的组件,但它们在功能、设计和使用场景上有一定的区别
  • 桂云OSG:什么是桂链?
  • 2025-03-13 学习记录--C/C++-PTA 练习2-13 求N分之一序列前N项和
  • DeepSeek R1 与 ktransformers:结合苹果 M4 Mac 的 LLM 推理深度分析
  • 计算机网络——DHCP实验