vue 打开浏览器新标签页预览 pdf 和 txt 文档,以及新标签页标题修改

// 在线查看
    showOnline({ id, fileExt, fileName }) {
      if (fileExt && ['jpg', 'jpeg', 'gif', 'bmp', 'png'].includes(fileExt.toLowerCase())) {
        download(`/file-item/${id}/download`)
          .then(result => {
            const blob = new Blob([result.data], { type: 'application/x-msdownload' })
            this.imageUrl = URL.createObjectURL(blob)
          })
        this.dialogVisible = true
      } else if (fileExt && fileExt.toLowerCase() === 'pdf') {
        download(`/file-item/${id}/download`)
          .then(result => {
            const blob = new Blob([result.data], { type: 'application/pdf' })
            const url = URL.createObjectURL(blob)
            const page = window.open(url, '_blank')
            setTimeout(function() { page.document.title = fileName }, 100)
          })
      } else if (fileExt && fileExt.toLowerCase() === 'txt') {
        download(`/file-item/${id}/download`)
          .then(result => {
            // 注意type,不同类型文件,type不同;另外text 第一个参数的数组第一项加'\ufeff',设置编码,解决中文乱码
            const blob = new Blob(['\ufeff', result.data], { type: 'text/plain' })
            const url = URL.createObjectURL(blob)
            const page = window.open(url, '_blank')
            // page.document.title = '新的标题名'
            // 因为window.open 异步,上面的方法很多时候不起效,加延时
            setTimeout(function() { page.document.title = fileName }, 100)
          })
      } else {
        this.$utils.message('info', '此类型文件不支持预览,请下载查看！')
      }
    }

主要就是用window.open()方法,注意事项都在上面代码中

参考文章:

https://www.cnblogs.com/cbxg24543/p/15589287.html

https://juejin.cn/post/7024133497958694925

https://www.cnblogs.com/weiliang-song/p/16085957.html