移动端文件预览在iframe中的问题解决方案?

Question

现在有一个需求要实现移动端文件预览。我把目标定向于微软免费的预览api上，只需后缀上拼接文件oss的Url路径即可实现预览。现在我想要把这个预览改成页面内通过iframe的方式实现,调试中我用pc模式调试正常可以预览，但是换成移动端就有问题，这个是啥问题？
pc模式：

app模式：

具体vue代码如下：
<template>

<div>
    <iframe :src="previewUrl" frameborder="0" style="width:100%;height:500px;">
    </iframe>
</div>

</template>
<script>
export default {

components: {

},
data() {
    return {
        url: 'https://jtg-web.oss-cn-hangzhou.aliyuncs.com/jtglw/pr/in/20240326/789d877e4c3445de8d636a6aa762f135.doc',
        previewUrl: ''
    }
},
computed: {


},
created() {

},
mounted() {
    this.previewUrl = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(this.url)}`
},
methods: {

},

}
</script>
<style scoped></style>

希望app模式下也可以预览

Answer 1

不支持移动端，可以用这个插件

https://npm.io/package/@vue-office/docx