vue中的文件操作2

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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);
                    }
                })

 预览地址下载

图片、pdf等文件，浏览器会默认执行预览，不能调用download方法进行下载，需要先把图片、pdf等文件转成blob，再调用download方法进行下载，转换的方式是使用axios请求对应的链接

download(link, name) {
                if (!name) { //如果没有提供名字，从给的Link中截取最后一坨
                    name = link.slice(link.lastIndexOf('/') + 1)
                }
                let eleLink = document.createElement('a')
                eleLink.download = name
                eleLink.style.display = 'none'
                eleLink.href = link
                document.body.appendChild(eleLink)
                eleLink.click()
                document.body.removeChild(eleLink)
            },
            exportImg() {
                let link = "http:********r.png";
                let fileName = '测试图片下载';
                axios.request({
                    url: link,
                    responseType: 'blob' //关键代码，让axios把响应改成blob
                }).then(res => {
                    const link = URL.createObjectURL(res.data)
                    this.download(link, fileName)
                })
            },

 自定义下载内容

获取页面中的文字进行自定义下载

downloadFile(name, content) {
                if (typeof name == 'undefined') {
                    throw new Error('The first parameter name is a must')
                }
                if (typeof content == 'undefined') {
                    throw new Error('The second parameter content is a must')
                }
                if (!(content instanceof Blob)) {
                    content = new Blob([content])
                }
                const link = URL.createObjectURL(content)
                this.download(link, name)
            },
            download(link, name) {
                if (!name) { //如果没有提供名字，从给的Link中截取最后一坨
                    name = link.slice(link.lastIndexOf('/') + 1)
                }
                let eleLink = document.createElement('a')
                eleLink.download = name
                eleLink.style.display = 'none'
                eleLink.href = link
                document.body.appendChild(eleLink)
                eleLink.click()
                document.body.removeChild(eleLink)
            },
            demo() {
                this.downloadFile('1.txt', 'lalalallalalla')
                this.downloadFile('1.json', JSON.stringify({
                    name: 'hahahha'
                }))
            },

以上是 vue中的文件操作2 的全部内容， 来源链接： utcz.com/z/375766.html

回到顶部