前端(vue)js在线预览PDF、Word、Excel、ppt等office文件

js解決

 window.open("https://view.xdocin.com/view?src=" + encodeURIComponent(url) + '&toolbar=false');

可选参数

&pdf=true,word文档尝试以pdf方式显示,默认false

&watermark=水印文本,显示文本水印;“img:”+图片url表示图片水印,如:img:https://view.xdocin.com/demo/wm.png

&saveable=true,是否允许保存源文件,默认false

&printable=false,是否允许打印,默认true

©able=false,是否允许选择复制内容,默认true

&toolbar=false,是否显示底部工具条,默认true

&title=自定义标题

&expire=30,预览链接有效期,单位分钟,默认永久有效

&limit=,限制页数,如:“5”表示只显示前5页,“2,5”表示从第2页开始的5页,对pdf/doc/docx/ppt/pptx有效

&filename=文件名,辅助识别文档格式

&fontsize=字体大小(单位px),默认14,范围:6~58

&mtime=文件修改时间戳(如:1633093801,精确到秒)或修改时间(如:2021-10-01 21:10:01),值改变刷新缓存

 html (iframe )

<iframe 
 :src="`https://view.xdocin.com/view?src=${encodeURIComponent(url)}`"
 frameborder="0"
 width="100%"
 height="500"
></iframe>

  • 5
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3本身并没有提供在线预览WordExcel文档的功能,但是可以借助第三方库来实现。 其中比较常用的是使用office-web-viewer库来实现WordExcel文件在线预览。该库可以通过引入JavaScript文件来实现在线预览WordExcel文件。具体实现方式可以参考官方文档:https://docs.microsoft.com/en-us/office/dev/add-ins/develop/office-online-embedding-office-content-in-an-iframe。 在Vue3中使用office-web-viewer库的步骤为: 1. 在Vue3项目中安装office-web-viewer库: ```bash npm install office-web-viewer --save ``` 2. 在需要预览WordExcel文件的组件中引入office-web-viewer的JavaScript文件: ```html <script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js"></script> ``` 3. 在需要预览WordExcel文件的组件中使用office-web-viewer库提供的方法来实现预览功能: ```javascript import OfficeViewer from 'office-web-viewer'; export default { data() { return { fileUrl: 'https://example.com/sample.docx', // WordExcel文件的URL地址 }; }, mounted() { const viewer = new OfficeViewer({ element: '#viewer', // 预览区域的DOM元素ID action: 'view', // 预览的动作,可以是view、print、edit等 fileType: 'docx', // 文件类型,可以是docx、xlsx等 embedAs: 'iframe', // 预览方式,可以是iframe或embed enableMobileFriendly: true, // 是否启用移动端友好模式 supportFullScreen: true, // 是否支持全屏模式 }); viewer.embed(this.fileUrl); // 加载预览WordExcel文件 }, }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值