首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

angular js文件下载存在文件名空格问题

AngularJS是一种流行的前端开发框架,用于构建动态的Web应用程序。在使用AngularJS进行文件下载时,可能会遇到文件名中包含空格的问题。

文件名中的空格可能会导致下载链接无法正常工作,因为URL中的空格需要进行编码。为了解决这个问题,可以使用JavaScript中的encodeURIComponent函数对文件名进行编码,将空格替换为%20。

以下是一个示例代码,演示如何使用AngularJS进行文件下载并解决文件名空格问题:

代码语言:txt
复制
app.controller('DownloadController', function($scope, $http) {
  $scope.downloadFile = function() {
    var fileName = 'example file name with spaces.pdf';
    var encodedFileName = encodeURIComponent(fileName);
    var downloadUrl = 'http://example.com/download?file=' + encodedFileName;

    $http.get(downloadUrl, { responseType: 'arraybuffer' })
      .then(function(response) {
        var blob = new Blob([response.data], { type: 'application/pdf' });
        var objectUrl = URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = objectUrl;
        a.download = fileName;
        a.click();
        URL.revokeObjectURL(objectUrl);
      });
  };
});

在上述代码中,我们首先定义了一个文件名(包含空格),然后使用encodeURIComponent函数对文件名进行编码。接下来,我们构建了一个下载链接,将编码后的文件名作为参数传递给服务器。在成功获取文件数据后,我们创建了一个Blob对象,并使用URL.createObjectURL函数生成一个临时的URL。最后,我们创建了一个隐藏的<a>元素,设置其href属性为临时URL,并指定下载的文件名。通过调用a.click()方法,触发了文件下载操作。最后,我们使用URL.revokeObjectURL函数释放了临时URL。

这是一个解决AngularJS文件下载中文件名空格问题的示例。对于更复杂的文件下载需求,可以根据具体情况进行调整和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 遭遇Asp.Net长文件名下载问题和解决办法

    但是编码后文件名就会变得很长,比如我现在有一个文件叫: 招标送检样机项目检查登记表(终端)-空.XLS 我们进行网络抓包,可以看到在下载文件的时候的HTTP响应是: HTTP/1.1 200 OK...b0%e8%a1%a8(%e7%bb%88%e7%ab%af)-%e7%a9%ba.XLS 这都是在HTTP头里面的,由于浏览器或者其他原因,对于这么长的HTTP头,系统会对字符串进行截止,那么就会造成下载的时候文件名不全或者干脆就是乱码的情况...我试了一下,这个文件下载在IE8里面是完全正常的,但是在IE6里面就会造成字符串截止,变成“%a0%87送检样机项目检查登记表(终端)-空.XLS”。不同的浏览器截止的还不同。...解决办法有2种,1种是限制用户上传的文件文件名或者我们在下载的时候写代码对文件名进行截止,避免出现乱码的情况,但是这样造成的用户体验并不好。...当然,如果用户上传的是一个本来就很长很长的文件名文件,那也是没有办法的,而且数据库中设计的字段可能也没有那么长。那就要在上传的时候做好限制了。

    44820

    gulp自动化打包(上)

    图中主要演示项目中大概会有的几种文件类型,fonts(ttf,svg),image(jpg,png),js,less(sass),实际项目会复杂得多,开始一个项目的时候,可以直接从git上拿一个angular-seed...的js文件,如果两个都含有同一任务,不特殊说明的话,命令行只执行文件名为gulpfile.js的任务),在命令行输入 npm install gulp --save-dev(之前没有安装过gulp的话...,执行npm install gulp -g --save-dev)指令, “–save-dev”表示在安装gulp之后,将安装的信息保存在package.json文件,以便之后利用package.json...gulp-concat 合并代码,即将项目中各种JS合并成一个JS文件。一般与压缩连用,代码演示参考上方。 gulp-ng-annotate 如果不是angular框架,可以忽略。。。。...因为按照angular官方的说法,如果简写的话,压缩的时候,依赖注入很容易出问题,所以这个插件就是帮助我们解决简写压缩的问题

    1.7K30

    Angular 2 Component 中使用第三方 JS

    这是因为 TypeScript 编译器并不知道 snap.svg.js 提供了怎样的接口,所以当 ts 代码中出现了 Snap() 时,编译器会认为我们调用了一个不存在的方法而报错。...解决方式也很简单,只需要使用 declare 告知 TypeScript 编译器这个方法是在别处创建的,没有出错不用紧张:-) 简单的方法 bower 或直接下载 snap.svg.js 文件。...在 index.html 中引入这个 js 文件。...用上 SystemJS 如果你和我这里一样,是以 Angular 2 Quick Start 项目为基础,那么你的 SystemJS 配置文件就是项目文件夹下的 systemjs.config.js ,...'snap-svg': 'third-party/snap.svg-min.js', // 添加此行即可 }; 你的文件名与路径可能跟我不同,右侧是相对于项目文件夹的相对路径,看情况修改即可。

    1.9K30

    前端文件下载汇总「案例讲解」

    是的,下载文件名为 text.txt,我们在设定 a 标签的时候,使用了 download 属性并设定了值 file.txt。触发 a 标签,浏览器会自动下载文件。...可以吊起浏览器下载文件。那么,我们可以更改文件名下载? 我们来添加 download 属性值为 download='custom': 发现并不能更改文件名。 那么,跨域中 通过 JS 构建 a 标签 来更改文件名,是否可行呢?也是不能的,因为都是通过操作 a 标签。...它们有些异同: 同源和跨域下,都可以使用 a 标签对超链接文件进行预览或者下载 同源下,超链接文件可以通过 a 标签 download 属性值更改下载文件名;跨域下,超链接文件不能被更改文件名 超链接文件...是否让用户知道数据加载到哪里了呢,加载完后浏览器吊起下载? 需要解答上面这个问题,其实我们解决问题我们如何获取到文件加载的进度呢? 即可。

    25210

    【Hybrid开发高级系列】AngularJS(三)——开发实践

    Grunt的命令行界面)         适用本教程的Yeoman, Bower和Grunt版本     安装Yeoman生成器         在传统的Web开发流程中,你可能会花很多时间在配置代码模板、下载依赖还有手动组件项目文件结构上...当选中了’generator-angular’后,按下回车执行安装,它所依赖的Node包就会开始被下载了。         ...Angular模块是一些带有特定功能的独立的JS文件。举个例子,ngResource模块(angular-resource.js)提供了RESTful服务。你可以使用空格键来取消项目。...:主程序         controllers:Angular控制器     styles:我们的CSS文件     views:Angular模板 Gruntfile.js、package.json.../angular-1.4.9/angular.js"> app

    24720

    Angular10配置webpack打包 「详细教程」

    下载和安装 npm 包,你必须拥有一个 npm 包管理器。...它表示分离后生成新代码文件名称的链接符,比如说 app1.js 和 app2.js 都引用了 utils.js 这个工具库,那么,最后打包后分离生成的公用文件名可能是 xxapp1~app2.js 这样的...automaticNameDelimiter选项:打包生成的js文件名的分割符,默认为~。 name选项:打包生成js文件的名称。 cacheGroups选项,核心重点,配置提取模块的方案。...为true时,如果当前要提取的模块,在已经在打包生成的js文件存在,则将重用该模块,而不是把当前要提取的模块打包生成新的js文件。 enforce选项:true/false。...默认情况下,它将使用(src/index.ejs如果存在)。

    5K20

    你可能已经忽略的git commit规范

    git 规定提交时必须要写提交信息,作为改动说明,保存在 commit 历史中,方便回溯。...一般有以下几种: feat: 新增feature fix: 修复bug docs: 仅仅修改了文档,如readme.md style: 仅仅是对格式进行修改,如逗号、缩进、空格等。不改变代码逻辑。...通过以下命令来配置提交信息模板: git config commit.template [模板文件名] //这个命令只能设置当前分支的提交模板 git config — —global commit.template...[模板文件名] //这个命令能设置全局的提交模板,注意global前面是两杠 新建 .gitmessage.txt(模板文件) 内容可以如下: # headr: (...其实gitmoji的使用是很简单的: # 安装 npm i -g gitmoji-cli # 使用 git commit -m ':bug: 问题fix' 我们来看一下官方的示例吧: ?

    2.2K30

    prettier使用指南(包含所有配置项)

    这里我使用 .prettierrc.js来配置,因为偏好json那种风格的配置文件,但是json有个最大的问题是不支持注释。所以我这里用了js,把每一项都写上了注释,方便以后改的时候查看。..." (same parser as "html", but also formats angular-specific syntax via angular-estree-parser) First available...用单引号可以少按一个shift,方便一些 html中用的是双引号,所以js区分一下,用单引号。 其他默认的配置符合我使用习惯的也有可以讨论的: 关于tab用几个空格的讨论我选择用两个空格。...有以下的原因吧: js语言回调函数之类嵌套的场景比较多,如果用4空格缩进会占用过多的空间,2空格就比较紧凑。...2空格输入和删除都更方便(虽然我都是用tab输出2空格),方便修改 缺点也是比较紧凑,看着容易累。 针对特定文件覆盖配置 把官方的例子搬了过来。这样就能针对不同文件进行配置了。

    9.1K40

    nodejs基础-

    不要用中文 不要包含空格 不要出现node关键字 建议以,-'分割单词 十一、sublime text下载 http://www.sublimetext.cn/官方下载地址 汉化方法 https://.../相对路径的问题 解决:_dirname 、_filename _dirname:表示,当前正在执行的js文件所在的目录 _filename表示,当前正在执行的js文件的完整目录 ?...异步操作无法通过try-catch来捕获异常,要通过判断error来判断是否出错, 2、同步操作可以通过try-catch来捕获异常 3、不要使用fs.exists(path,callback)来判断文件是否存在...,直接判断error即可 4、文件操作时的路径问题   在读写文件的时候...../"表示的是当前执行node命令的那个路径,不是被执行的js文件的路径   dirname,表示的永远是“当前被执行的js的目录   filename,表示的是"被执行的 s的文件名(含路径)" 5、

    2.5K30

    用Visual Studio Code写Node.j

    目前主流的前端类库/框架,包括node.js及其模块/框架都有相应的tsd文件,可以去DefinitelyTyped上找一下。 在项目中引入对应文件,就可以有智能提示了。...这里以angular为例,使用步骤如下: 全局安装tsd,通过tsd安装.d.ts文件。这样会在项目下面生成.typings目录,目录下面就是下载的.d.ts文件,再写代码的时候就会有智能提示了。...,选择下载xx.d.ts文件就可以了,编辑器会下载对应文件放在.typings目录。...Node API 查看 在写node.js代码的时候,有时会忘记某个模块中有哪些方法及其用法,经常要去官网翻一下api文档。 这里介绍下怎么使用vsc来搞定这一问题。...结语 vsc和其他编辑器(sublime text,atom,webstorm等)相比,某些方面还存在很多问题。对于一个前端工程师来说,它已经足够好了。 当然了,它在不断改进。

    1.1K130

    JavaScript 框架安全报告2019

    在这里下载报告【https://bit.ly/js-security-report】 我们强烈建议下载完整报告的电子版,但还提供了以下内容作为博客文章: JavaScript 框架安全性状态报告 2019...CVE 根本没有列出任何关于 Angular 的漏洞报告。总之,这些都证明开源社区需要利用漏洞数据库,以便发现相关的安全问题。...React模块生态系统安全性 React 和 Angular 模块生态系统在广受欢迎的前端库组件中都显示存在安全漏洞,这些前端组件的下载次数高达数百万,其中有些到目前为止尚无安全修复。...在过去的 12 个月中,Vue.js 框架的下载次数已超过 4000 万次,Vue.js 内核总共存在四个漏洞,不过已经被修复。...-2019】或者 下载完整报告【https://bit.ly/js-security-report】。

    1.1K10

    如何在 ASP.NET MVC 中集成 AngularJS(2)

    捆绑可以很容易地将多个文件合并或捆绑到一个文件中。您可以创建 CSS,JavaScript 和其他包。压缩可以优化脚本和 CSS 代码,如去除不必要的空格和注释,缩短变量名到一个字符。...我为工程中的每一个文件设置了一个独立的捆绑,包括对脚本的单独捆绑,Angular 的核心文件,共享的 JavaScript 文件和主目录单,客户目录和产品目录。..."~/Scripts/angular-sanitize.min.js", "~/Scripts/angular-ui.min.js", "~/Scripts/...从 Visual Studio 中启动应用程序时,您可能会遇到浏览器缓存的问题。同时也可能会花时间来猜测,你运行的是否是最新版本的 JavaScript 文件。在浏览器中按 F5 可以解决这个问题。...首先,每当用户选择一个页面来加载一定功能模块时,对于模块绑定的所有 JavaScript 文件需要被下载

    8.3K100
    领券