springboot+layui的页面使用iframe标签报Whitelabel Error Page错

源代码

<legend>附件</legend>
	  		<!-- 附件上传的iframe id="file_1"用于区别一个表单中添加多个附件上传列表  -->
			<div class="layui-form-item" style="height: 400px;">
				<input id="fileFilter" type="hidden" value="">
				<iframe id="file_1" src="public?mode=core/uploadfile/list"
					frameborder="0" class="layadmin-iframe" name="iframeMain"
					style="width: 100%; height: 100%;"></iframe>
			</div>
	  		</fieldset>

页面报错
在这里插入图片描述

在这里插入图片描述

经过处理,发现是iframe标签的src属性前面缺少(/),如果缺少这条斜杠,url就会在父页面的url后面拼接(/core/public?mode=core/uploadfile/list ),所有public前面要加上斜杠(/),错误就会消失
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现Spring Boot + Vue的PDF预览,你可以使用以下步骤: 1. 在Spring Boot中,你需要建立一个RESTful API,用于从服务器上获取PDF文件的二进制数据。你可以使用Spring Boot的`@RestController`注解来建立API endpoint。 2. 在Vue中,你需要使用PDF.js这个JavaScript库来处理PDF文件。你可以将PDF.js的脚本文件引入到Vue组件中。你可以使用Vue的`mounted()`生命周期钩子来初始化PDF.js,加载PDF文件并显示在页面上。 3. 在Vue中,你可以使用`<embed>`或`<iframe>`标签来显示PDF文件。你可以将PDF.js渲染出来的canvas元素插入到这些标签中。 4. 在Vue中,你需要定义一个方法来调用Spring Boot中的API endpoint,获取PDF文件的二进制数据。你可以使用axios或其他JavaScript库来发送HTTP请求。在成功获取PDF文件的二进制数据后,你可以调用PDF.js的API来加载并渲染PDF文件。 下面是一个简单的Vue组件代码示例: ```vue <template> <div> <embed :src="pdfUrl" type="application/pdf" width="100%" height="500px" /> </div> </template> <script> import axios from 'axios'; import pdfjsLib from 'pdfjs-dist'; export default { name: 'PdfPreview', data() { return { pdfUrl: null, }; }, mounted() { this.loadPdf(); }, methods: { async loadPdf() { const response = await axios.get('/api/pdf'); const pdfData = response.data; const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise; const page = await pdf.getPage(1); const viewport = page.getViewport({ scale: 1 }); const canvas = document.createElement('canvas'); canvas.width = viewport.width; canvas.height = viewport.height; const context = canvas.getContext('2d'); const renderContext = { canvasContext: context, viewport: viewport, }; await page.render(renderContext).promise; this.pdfUrl = canvas.toDataURL('image/png'); }, }, }; </script> ``` 在上面的代码中,我们定义了一个Vue组件`PdfPreview`,它会从`/api/pdf`这个API endpoint中获取PDF文件的二进制数据,并使用PDF.js将其渲染在页面上。最终,PDF文件会以`<embed>`标签的形式呈现在页面上。 注意,上面的代码示例仅供参考。你需要根据自己的具体情况进行修改和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值