vue 下载文档乱码的解决

目录
  • vue下载文档乱码
  • 文件下载返回乱码处理 vue+axios
    • 解决方法

vue下载文档乱码

最近写功能 vue导出，但是不知道为啥，一请求接口就是乱码

后来在接口里写上了 这句话 responseType:“blob”,

能下载了赶快高兴打开一看 日，下载下来的文件里面又是乱码

后来不停的琢磨，咦终于找到方法了

这里面加了一句话 终于成功了！

我给大家把代码贴上

 exportAccountApi(data).then(res=>{
        console.log('777666',res)
        const blob = new Blob([res],{type: "application/vnd.ms-excel"});
        let fileName = "存款记录明细.xls";
         if ("download" in document.createElement("a")) {
           const elink  = document.createElement("a");
           elink.download =fileName;
           elink.style.display = "none";
           elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
           elink.click();
           URL.revokeObjectURL(elink.href);
           document.body.removeChild(elink);
         }else{
           navigator.msSaveBlob(blob.fileName)
         }
      })

文件下载返回乱码处理 vue+axios

后端返回数据流是乱码，可以使用new Blob()这个方法处理，可以解决乱码问题。

乱码返回结果如下：

解决方法

    async postClick() {
      const res = await axios({
        url: '后端接口',
        method: 'post',
        data: { id: '文件id' }
        responseType: 'blob'
      })
      const content = res.data
      const fileName = 'a.png' // 文件名称
      // 如果不确定文件类型,type可以写空字符串
      const bolb = new Blob([content], { type: '' })
      if ('download' in document.createElement('a')) {
        const link = document.createElement('a')
        link.download = fileName
        link.style.display = 'none'
        // URL.createObjectURL(bolb) = blob:http://localhost:8080/a34a8a20-acf2-3f21-bc22-45994d9f0290
        link.href = URL.createObjectURL(bolb)
        document.body.appendChild(link)
        link.click()
        URL.revokeObjectURL(link.href)
        document.body.removeChild(link)
      }
    }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue不能下载xls以及文件乱码问题解决

    Vue不能下载xls以及文件乱码问题解决

    发现问题 老大要让我实现下载xls文件的功能,我想了想:我好像不太会耶! 但是我们之前写的一个页面有一个下载xls的功能,那我就CV大法,嘿嘿嘿. 当我点击下载按钮的那一刻,控制台红了...,心想MMP 一样的代码不行,那个就能下载,我CV后变质了? 报错原因:TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed. 我看了看网络请求,老大说传过来的数据没问题,可能是数据太大? 我看了

  • 解决vue-pdf查看pdf文件及打印乱码的问题

    前言 vue中简单使用vue-pdf预览pdf文件,解决打印预览乱码问题 vue-pdf 使用 安装 npm install --save vue-pdf 引入 import pdf from "vue-pdf 自定义封装pdf预览组件 <template> <el-dialog :visible.sync="pdfDialog" :close-on-click-modal="false" :show-close="false&

  • 解决vue下载后台传过来的乱码流的问题

    解决vue下载后台传过来的乱码流的问题

    后台返回的乱码流 解决办法: 请求方式用的是axios,主要加关键的 {responseType: 'blob'} axios封装 export function postDownload(url, data) { return new Promise((resolve, reject) => { instance.post(url,data,{responseType: 'blob'}).then(response => { resolve(response); }, err => {

  • vue 下载文档乱码的解决

    vue 下载文档乱码的解决

    目录 vue下载文档乱码 文件下载返回乱码处理 vue+axios 解决方法 vue下载文档乱码 最近写功能 vue导出,但是不知道为啥,一请求接口就是乱码 后来在接口里写上了 这句话 responseType:“blob”, 能下载了赶快高兴打开一看 日,下载下来的文件里面又是乱码 后来不停的琢磨,咦终于找到方法了 这里面加了一句话 终于成功了! 我给大家把代码贴上 exportAccountApi(data).then(res=>{ console.log('777666',res) con

  • asp下UTF-8页面乱码的解决方法

    为什么在ASP里指定了codepage为65001还经常显示乱码.才子在这里将这个问题详细解释一下,以免很多朋友再走弯路,甚至排斥UTF-8. 如果你还不知道UTF-8是什么东东,那才子建议你先去搜索一下UTF-8的相关资料吧. UTF-8编码之所以被越来越多的人接受甚至喜欢,肯定是有道理的,在WEB2.0盛行的今天,在大谈多浏览器兼容的同时,不得不想到字符编码不同所造成的乱码现象同样需要得到很好的处理..... 在N年以前,IE6以下的所有版本,只要没有安装相应的字库,访问相关的页面都是会乱码

  • php中强制下载文件的代码（解决了IE下中文文件名乱码问题）

    中间遇到一个问题是提交的中文文件名直接放到header里在IE下会变成乱码,解决方法是将文件名先urlencode一下再放入header,如下. 复制代码 代码如下: <?php $file_name = urlencode($_REQUEST['filename']); header("Pragma: public"); header("Expires: 0"); header("Cache-Control: must-revalidate, po

  • PHP附件下载中文名称乱码的解决方法

    本文实例讲述了PHP附件下载中文名称乱码的解决方法.分享给大家供大家参考,具体如下: PHP中,如果要下载的文件名称为中文,则会出现文件标题乱码. 此时就需要对标题进行编码,也就是说先进性urlencode,然后再放入header,然后问题就解决了. $filename = urlencode("下载文档"); header ( "Content-disposition: attachment; filename=$filename.xls" ); 网上说,在RFC

  • vue下history模式刷新后404错误解决方法

    本文介绍了vue下history模式刷新后404错误解决方法,分享给大家,具体如下: 官方说明文档: https://router.vuejs.org/zh/guide/essentials/history-mode.html 一. 实测 Linux 系统 Apache 配置: 更改站点配置文件即可,我这里在 Directory 标签后面添加了官方给的五行配置 <VirtualHost *:80> #Created by linvic on 2018-05-24 Serveradmin 674

  • Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法

    项目地址:https://github.com/PythonerKK/django-generate-pdf/tree/master 这个demo实现了通过用户输入自己的个人信息生成一份简历pdf,来阐述如何使用Django的HttpResponse生成PDF的文档. 先上效果图: 安装依赖库 首先安装Django最新版2.2.2和PDF依赖包xhtml2pdf pip install django pip install xhtml2pdf 编写表单验证 为了简单起见,这个demo依赖数据库,

  • 解决linux下vim中文乱码的方法

    Vim编码的详细介绍 Vim和所有的流行文本编辑器一样,Vim 可以很好的编辑各种字符编码的文件,这当然包括 UCS-2.UTF-8 等流行的 Unicode 编码方式. Vim 有四个跟字符编码方式有关的选项,encoding.fileencoding.fileencodings.termencoding (这些选项可能的取值请参考 Vim 在线帮助  :help encoding-names),它们的意义如下: 1.encoding: Vim 内部使用的字符编码方式,包括 Vim 的 buf

  • IE下Ajax提交乱码的快速解决方法

    哈哈,试了这么多还是encodeURIComponent管用啊!!!! 在汉字的位置加个保护措施:encodeURIComponent(parentid) function loadCity(parentid) { var city = '${hotel.city}'; $.ajax({ url: './listCity.jspx?prov='+ encodeURIComponent(parentid), type: 'GET', dataType: 'JSON', timeout: 5000,

  • Linux下JDK中文字体乱码的解决方法

    问题描述: 部署在linux下的java应用程序中的中文会变成一个一个的"口"字,也就是乱码 问题分析: 代码中使用了如下的实现方式: new java.awt.Font("宋体", Font.PLAIN, 12)那么jdk中一定需要"宋体"这个字体($JAVA_HOME/jre/lib/fonts目录下) 由于JDK默认没有中文字体,所以就会显示为乱码 需要手工设置一下,让java应用程序能够找到所需的中文字体 解决方式: 将需要的字体文件上传

  • CMD下执行Go出现中文乱码的解决方法

    CMD下执行Go出现中文乱码的解决方法

    目录 1.报错信息如下 2.原因分析 3.解决方法 4.封装处理乱码方法 5.解决乱码完整代码 1.报错信息如下 2.原因分析 因为Go的编码是UTF-8,而CMD的活动页是cp936(GBK),因此产生乱码.在中文Windows系统中,如果一个文本文件是UTF-8编码的,那么在CMD.exe命令行窗口(所谓的DOS窗口)中不能正确显示文件中的内容.在默认情况下,命令行窗口中使用的代码页是中文或者美国的,即编码是中文字符集或者英文字符集. 3.解决方法 golang处理中文时默认是utf8,当遇

随机推荐