springboot+pdfjs+iframe在线预览PDF,以及出现空白问题

vue前端+element

<el-dialog
  custom-class="pdfChargeClass"
  :visible.sync="pdfVisible"
  width="900px">
  <template>
    <iframe class="prism-player" :src="pdfUrl" width="100%" height="800px"></iframe>
  </template>
</el-dialog>

springboot后端

/**
     * 文件预览
     * @param response
     * @throws IOException
     */
    @GetMapping("/previewPdf")
    @ResponseBody
    public void previewPdf(String fileId, HttpServletResponse response) throws IOException {
   
//        "D:\\tmp\\1519559233116921858.pdf"
        InputStream in = null;
        OutputStream out = response.getOutputStream();
        try {
   
            File file = new File("D:\\tmp\\1519559233116921858.pdf");
            if (file.exists()){
   
                response.res
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 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
发出的红包

打赏作者

阿杰杰1314

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值