vue前端无需插件实现网页在线预览pdf、xls、xlsx、ppt、jpg等多格式文件

 第一种:

 https://view.xdocin.com/view?src=你的文档地址

第二种: 

https://view.xdocin.com/xdoc?_xdoc=

项目中可以这样使用:

注:前缀是固定的;你的文档地址必须是外网可访问的并且是http或https打头

给预览按钮方法中加上这段代码

      window.open(`https://view.xdocin.com/xdoc?_xdoc=http://1.119.169.70:10044/hn-zygl/download${val.fSrc}`);

展示效果:

​​​​​​​

 

参考链接1:https://view.xdocin.com/

参考链接2:https://www.ngui.cc/el/404600.html?action=onClick

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用 `vue` 框架配合 `antd` 组件库来实现前端预览 `jpg`、`pdf`、`ceb` 格式的文件。下面是一种可能的实现方式: 1. 安装必要的依赖: ```bash npm install vue-pdf ant-design-vue ``` 2. 在您的 Vue 组件中引入所需的组件: ```javascript import { Button, Modal } from 'ant-design-vue'; import PdfViewer from 'vue-pdf'; export default { components: { Button, Modal, PdfViewer }, data() { return { previewVisible: false, previewFile: null, fileFormat: '' }; }, methods: { handlePreview(file) { this.previewFile = file; this.previewVisible = true; }, handleClosePreview() { this.previewVisible = false; this.previewFile = null; } }, render() { return ( <div> {/* 按钮组件 */} <Button type="primary" onClick={() => this.handlePreview('file.jpg')}> 预览 JPG </Button> <Button type="primary" onClick={() => this.handlePreview('file.pdf')}> 预览 PDF </Button> <Button type="primary" onClick={() => this.handlePreview('file.ceb')}> 预览 CEB </Button> {/* 文件预览模态框 */} <Modal title="文件预览" visible={this.previewVisible} onCancel={this.handleClosePreview} footer={null} > {this.previewFile && ( <div> {this.previewFile.endsWith('.pdf') && ( <PdfViewer src={this.previewFile} /> )} {/* 其他文件格式预览组件,根据实际需求自行选择 */} {/* 示例:<ImageViewer src={this.previewFile} /> */} </div> )} </Modal> </div> ); } }; ``` 3. 在示例代码中,我们通过 `Button` 组件触发 `handlePreview` 方法来打开文件预览模态框。预览模态框使用 `Modal` 组件展示,并根据文件格式选择相应的预览组件(示例中使用了 `vue-pdf` 组件来预览 PDF 文件)。 请注意,上述示例中的 `PdfViewer` 组件仅支持预览 PDF 文件,对于其他文件格式(如 `jpg`、`ceb`),您需要自行选择相应的预览组件或者编写自定义组件来进行预览。 另外,您可能需要根据实际情况进行样式调整和其他逻辑处理。希望以上代码对您有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值