vue中微软的office online， 图片不能预览

Question

vue中微软的office online， 图片不能预览

 const typeArr = ['csv', 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx', 'rtf', 'bmp', 'jpg', 'jpeg', 'png', 'tif', 'gif', 'pcx', 'tga', 'exif', 'fpx', 'svg',
              'psd', 'cdr', 'pcd', 'dxf', 'ufo', 'eps', 'ai', 'raw', 'WMF', 'webp', 'avif', 'apng']
            // const typeArr = ['csv', 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx', 'rtf']

            let url = ''
            if (typeArr.indexOf(File.fileFormat) !== -1) {
              console.log(8888)
              // 使用微软的office online
              url = 'https://view.officeapps.live.com/op/view.aspx?src=' + File.absoUrl
            } else {
              console.log(999)
              // url = item.absoUrl
              url = 'https://view.xdocin.com/xdoc?_xdoc=' + File.absoUrl
            }
            console.log(url, 'url')
            // window.open()居中打开
            const width = 1000; const height = 800
            const top = (window.screen.availHeight - height) / 2
            const left = (window.screen.availWidth - width) / 2
            window.open(url, '', 'width=' + width + ',height=' + height + ',top=' + top + ',left=' + left)

报错如下：

Answer 1

该回答引用自GPT-3.5,由博主GISer Liu编写：

根据您提供的代码和报错信息，问题似乎出现在使用微软的Office Online预览图片时。根据报错信息，您可能遇到了跨域访问的问题。
解决这个问题的思路和方案如下：

1. 跨域访问问题： 微软的Office Online服务可能限制了对跨域资源的访问。为了解决这个问题，您需要确保您的网站与微软的Office Online服务位于同一个域或者您的网站已经被微软的Office Online服务所允许访问。
2. 代码修改： 您的代码看起来已经正确地构建了URL并尝试在新窗口中打开它。但在处理跨域问题时，您需要确保所请求的资源能够被成功加载。这可能需要您在URL中添加一些额外的参数或者处理一些授权问题。
   下面是一种可能的解决方案：
   javascriptCopy code

   // 添加一个额外的参数，比如为了处理跨域访问，您可以尝试添加如下的参数
   url = 'https://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(File.absoUrl) + '&embedded=true';
   // 使用 window.open() 打开预览页面
   window.open(url, '', 'width=' + width + ',height=' + height + ',top=' + top + ',left=' + left);
   

   在这个解决方案中，我们通过在URL中添加了一个名为embedded的参数，并将其值设置为true，来试图处理跨域访问的问题。同时，我们还使用了encodeURIComponent()函数对URL中的特殊字符进行了编码，以确保URL的正确性。
   您可以尝试使用这个修改后的代码，看看是否能够解决您遇到的问题。如果仍然无法解决，可能需要进一步研究微软Office
   Online服务的跨域访问策略，并相应地调整您的代码或者请求方式。
   希望这个解决方案能够帮助您解决问题！如果您有任何其他疑问或者需要进一步的帮助，请随时提出。

如果该回答解决了您的问题，请采纳！如果没有，请参考以下方案进行修订