问题1:https网页不支持嵌入另一站点上传的http资源
报错:Mixed Content: The page at ‘https://xxx.html’ was loaded over HTTPS, but requested an insecure resource ‘http://xxx.pdf’. This request has been blocked; the content must be served over HTTPS.
解决:ngnix部署,将http站点变为https
问题2:pdf iframe无法显示
解决:使用vue-pdf插件
import pdf from 'vue-pdf'
components: {
pdf
},
<pdf ref="pdf" :src="pdfUrl" :page="pageNum" :rotate="pageRotate"
@password="password"
@progress="loadedRatio = $event"
@page-loaded="pageLoaded($event)"
@num-pages="pageTotalNum=$event"
@error="pdfError($event)"
@link-clicked="page = $event">
</pdf>
<div class="pdf-tab">
<van-button type="info" size="small" class="btn-def btn-pre" @click.stop="prePage">上一页
</van-button>
<van-button type="info" class="btn-def btn-next" size="small" @click.stop="nextPage">下一页
</van-button>
<span>{{pageNum}}/{{pageTotalNum}}</span>
<van-button class="btn-def" type="info" size="small" :class="{select:idx==0}" @touchstart="idx=0"
@touchend="idx=-1" @click="scaleD">放大</van-button>
<van-button class="btn-def" type="info" size="small" :class="{select:idx==1}" @touchstart="idx=1"
@touchend="idx=-1" @click="scaleX">缩小</van-button>
</div>
问题3:word文件移动端无法显示
解决:使用XDOC云服务,将后端返回的数据资源链接拼接上 即可显示
<div v-if="isDoc">
<iframe frameborder="0" width="100%" height="100%" :src="`https://view.xdocin.com/xdoc?_xdoc=${docUrl}`"></iframe>
</div>