javascript h5 app(react.js)中如何下载附件(url链接形式)并在新窗口中打开附件?

JavaScript018

javascript h5 app(react.js)中如何下载附件(url链接形式)并在新窗口中打开附件?,第1张

我们只要用content创建一个ObjectURL并赋值给aLink即可解决文件类型的限制问题。

文件的自动下载也挺好办,自己构建一个UI点击事件,再自动触发下,就能实现自动下载啦。

现在来看看最终代码:

代码如下:

function downloadFile(fileName, content){

var aLink = document.createElement('a')

var blob = new Blob([content])

var evt = document.createEvent("HTMLEvents")

evt.initEvent("click", false, false)//initEvent 不加后两个参数在FF下会报错, 感谢 Barret Lee 的反馈

aLink.download = fileName

aLink.href = URL.createObjectURL(blob)

aLink.dispatchEvent(evt)

}

现在,只要一调用downloadFile,文件就自动下载了

推荐使用VS code ,里面有特别多的插件可以使用,对开发的帮助特别大。chorme浏览器可以下载React Developer Tools用来检测哪些网站使用的react 开发的

用reactjs构建一个完整的前端页面的步骤:

准备:React 的安装包,建议去官网下载安装

1、使用 React 的网页源码,结构大致如下:

<!DOCTYPE html><html>  <head>    <script src="../build/react.js"></script>    <script src="../build/react-dom.js"></script>    <script src="../build/browser.min.js"></script>  </head>  <body>    <div id="example"></div>    <script type="text/babel">      // **用户代码 **   </script>  </body></html>

上面代码有两个地方需要注意。

首先,最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是使用 JSX 的地方,都要加上 type="text/babel" 。

其次,上面代码一共用了三个库: react.js 、react-dom.js 和 Browser.js ,它们必须首先加载。其中,react.js 是 React 的核心库,react-dom.js 是提供与 DOM 相关的功能,Browser.js 的作用是将 JSX 语法转为 JavaScript 语法,这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。

2、将 src 子目录的 js 文件进行语法转换,转码后的文件全部放在 build 子目录。

$ babel src --out-dir build

3、渲染转换成html节点,以方便操作dom:

ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

这里以插入hello world为例来说明

ReactDOM.render(  <h1>Hello, world!</h1>,  document.getElementById('example'))

4、运行结果如下: