html实现浏览器新开页面下载文件并预览

肖哥哥
1,011 阅读1分钟

实现文件预览的快速的解决方案，使用微软提供的接口地址，直接拼接自己文件的url即可。

一般文件使用这个微软的接口
【http://view.officeapps.live.com/op/view.aspx?src=要查看的文档地址】
PDF文件使用这个接口
【http://view.officeapps.live.com/op/view.aspx?src=pdf源地址】

我做了一个测试，如下代码：

<span onClick={() => this.handlePreview()}>预览</span>

handlePreview = () => {
    // 直接下载
    // download(`http://124.42.103.156:8089/group1/M00/00/02/CgrQcV-RPIiAP61HAAAv6_C3uVo06.docx`)

    //通过新开一个浏览器页面预览文件
    // docUrl文件源地址拼接之后，经过打包后可预览的url地址中可能包含了根路径的名字，
    // 应去掉根路径的名字，保证预览的url地址是正常的，没有特殊符号的，才可以预览
    // const docUrl = 'http://124.42.103.156:8089/group1/M00/00/02/CgrQcV-RPIiAP61HAAAv6_C3uVo06.docx';
    const testUrl = 'http://offline-trade-1256468630.cos.ap-beijing.myqcloud.com/promotion/dev/%E4%BF%83%E9%94%80%E5%95%86%E5%93%81%E6%95%B0%E6%8D%AE-2019122414390201.xlsx?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKIDPhojU3JwCLI4e3rLF7QjtvyscAWloJbj%26q-sign-time%3D1577169548%3B1892529548%26q-key-time%3D1577169548%3B1892529548%26q-header-list%3D%26q-url-param-list%3D%26q-signature%3Ddfa559c3a7af248b343e44b1e8d238e6fa4f1591\n';
    // 如果是PDF文件使用这个接口，再拼接上你转换之后的文件远地址即可预览
    const pdfServe = 'http://view.officeapps.live.com/op/view.aspx?src=';
    // 如果是其他文件使用这个接口，再拼接上你转换之后的文件源地址即可预览
    const docServe = 'http://view.officeapps.live.com/op/view.aspx?src=';
    // 需要经过编码转换
    const getUrl = encodeURIComponent(testUrl);
    const url = `${docServe}${getUrl}`;
    console.log('拼接之后的地址在浏览器即可预览文件：' + url);
    const ele = document.createElement('a');
    ele.target = "_blank"; // 新开一个浏览器页面预览文件
    ele.setAttribute('href', url); //下载文件的url地址
    ele.setAttribute('download', 'download'); //用于设置下载文件的文件名
    document.body.appendChild(ele);
    ele.click();
  }

如果使用微软预览访问报错：

解决方法：

1，预览的文件得有一个可下载的url地址；  
2，需要将俩地址进行UrlEncode编码得转换【工具或js两种方式】；
   可通过encodeURIComponent(url)编码转换
3，再将转换完的url进行拼接，得到可预览的地址；  
4，将可预览的url地址放在a标签的href上或者直接浏览器访问即可进行预览；
avatar
文章
阅读
粉丝