首页 > 其他 > 详细

vue中的文件操作2

时间:2020-06-28 20:18:12      阅读:76      评论:0      收藏:0      [点我收藏+]

PDF在线预览

前面介绍过使用a标签实现pdf的预览,需要借助于浏览器,现在项目中需要在当前页的弹窗中预览PDF:

技术分享图片

 这个时候,a标签是不满足需求的,我们需要借助一个PDF插件:

 PDF插件下载   提取码(y5yr)

使用:

1,将PDF插件放在项目里面,或者服务器中

2,获取PDF文件流

技术分享图片

 3,文件展示

技术分享图片

 文件下载(返回数据流)

 1,无token验证的get方法:

 技术分享图片

2,带token验证的方法:

技术分享图片

let headers = {
                    token:  sessionStorage.getItem(‘token‘),
                    operationLocation: ‘*****‘
                };
                axios({
                    method:‘post‘,
                    url:window.config.host +‘****‘,
                    data:params,
                    responseType:‘arraybuffer‘,
                    headers:headers
                }).then((response) => {
                    let blob = new Blob([response.data], {
                        type: ‘application/vnd.ms-excel;charset=utf-8‘
                    });
                    this.content = response.data;
                    // 汉子解码
                    let filename = decodeURIComponent(response.headers[‘content-disposition‘]);
                    if (window.navigator.msSaveOrOpenBlob) {
                        navigator.msSaveBlob(blob, filename);
                    } else {
                        let aTag = document.createElement(‘a‘);
                        aTag.download = filename;
                        aTag.href = window.URL.createObjectURL(blob);
                        aTag.click();
                        URL.revokeObjectURL(aTag.href);
                    }
                })

 

vue中的文件操作2

原文:https://www.cnblogs.com/yuyujuan/p/13182346.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!