html 嵌入word 插件,利用VenoBox插件在网页中悬浮显示word文档

本文介绍了如何利用jquery插件VenoBox在网页中悬浮显示设备手册,解决了文件过多不便管理的问题。通过引入js和css文件,设置iframe和data-type属性,启用venobox,并将word文档转换为网页。遇到的乱码问题通过设置office的web选项编码为utf-8得以解决,最终在手机端实现了方便查看的效果。
摘要由CSDN通过智能技术生成

笔者最近在酝酿一个小系统,一个功能就是要将设备手册显示悬浮显示在网页中。点击一下按钮出来了,可以实现在手机端方便查看。但是又不能将手册直接至于html文件中,因为文件文字过于繁多,不利于修改与管理。

辗转反侧找到一个jquery插件VenoBox,十分方便就解决笔者的问题。

1、当然和其他js插件一样需要应用js和css文件。

2、在html文件中,在iframe内插入网页,加入data-type属性。

应知应会

3、JS中启用venobox,还有很多参数可以设置,这可以到veno它的官网查看https://veno.es/venobox/。

$(document).ready(function(){

$('.venobox').venobox();

});

4、最后很重要的一步,就是怎么把word转为网页显示呢。

利用word文档的功能。文件-另存为-网页html/html,将生成的网页以及它的文件夹放在第2部的www目录中。

4268bf9be8b3

5、点击浏览发现乱码,chrome浏览器和手机浏览器都乱码,edge浏览器正常。乱码源于编码问题,到处找寻一番,设置文档的编码后解决!

设置office web选项的编码为utf-8,原格式是GB2312-80。点击文件->选项->高级找到web选项:

4268bf9be8b3

6、完美解决,看看手机上效果,还可以左右翻选择其他文档呢。

4268bf9be8b3

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值