【移动端】移动端项目手机预览方法

前端实现在线预览文件 XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本、带参数文本、html文本、json文本、公文等在线预览,具体实现方法请看官方文档。word、ppt、xls文件实现在线预览的方式比较简单可以直接通过调用微软的在线预览功能实现(预览前提:资源必须是公共可访问的)实现 word、xls、ppt文件在线预览功能。 阅读详情

Windows系统移动端项目,手机预览方法:

环境要求:node安装成功

第一步:打开命令行工具

               ① win + r    打开windows运行窗口

               ② 输入 cmd 打开命令行工具

第二步:安装全局http服务

               npm install -g http-server    (npm安装全局http服务)

               cnpm install -g http-server   (国内镜像安装全局http服务)

第三步:进入项目打开http服务

               ① cd 项目  (根据自身路径进入到移动端项目)

               ② 输入 http-server  打开 http服务

第四步:手机访问命令行工具里弹出的 ip地址即可

Mac系统移动端项目,手机预览方法:

第一步:打开mac终端,开启Apache(mac系统自带无需下载):

//开启apache:
 sudo apachectl start
//重启apache: 
 sudo apachectl restart
//关闭apache: 
 sudo apachectl stop

第二步:查看mac ip地址:

//打开终端输入命令
ifconfig

 第三步:手机或者电脑访问mac的IP地址

出现该字样,表明服务启动成功!

第四步:打开finder  使用快捷键 Command+Shift+G 打开查询文件窗口输入 /Library/WebServer/Documents 文件地址进入该文件

 

 把你想要预览的文件放入Documents中

第五步:设备访问 http://ip/文件名 即可访问

扩展:手机访问mac ip 地址出现的 It works!字样,其实是访问了documents文件夹下的index.html.en 文件,所以开启服务后,document里的文件都可以被同网络的任意设备通过当前mac的ip地址访问到!

手机预览vue脚手架项目请移步【移动端】vue脚手架项目手机实时预览方法

uniapp h5实现Excel、Word、PDF文件在线预览,而不是跳转下载,也不需要下载 uniapp h5实现Excel、Word、PDF文件在线预览,而不是跳转下载,也不需要下载。 阅读详情

相关推荐

使用Vue-Cli脚手架搭建一个web项目实现图片轮播预览的手机网页

零、Description 1.要求使用Vue-CLI脚手架工具搭建一个Web项目vue-photo(本次实验必须用Vue-CLI脚手架搭建项目)。实验报告要求将项目文件结构截图,并简单介绍。 2.参照源码效果,实现一个图片轮播预览的手机网页。使用Vue组件编程方法完成主要功能,具体使用的编程技术不限。 3.功能上要求实现最基本的指定图片浏览。 4.自选扩展实验:模仿手机上的相机图片预览功能,实现手机内图片预览。本条内容根据自己的学习情况,可选做。 一、使用Vue-Cli搭建项目 注:如果使用的是vue-c

Jimmy Huang's Blog 997

移动端如何浏览EXCEL、word、ppt、pdf等文件在线预览?

PDF,EXECLE,WORD,PPT在线预览

weixin_71251814的博客 3824

CATIA P3 V5-6R2023在Windows 11 23H2上的稳定安装与系统级配置指南

CATIA是高端制造业核心的三维参数化设计平台,其运行依赖严格的系统底层支撑。理解CATIA的BRep几何内核原理与Windows子系统(如WSL、Hyper-V)的协同机制,是保障建模稳定性与计算精度的技术前提。CATIA Run-Time Library和OpenGL硬件加速能力共同决定了曲面重建、螺纹建模等关键操作的可靠性;而.NET Framework 3.5、VC++ 2022运行库及显卡Studio驱动的精准匹配,则构成工业软件在Win11环境落地的工程基础。本文聚焦于航空、轨交、能源等领域高频

weixin_30983353的博客 636

移动端页面预览pdf文件

我们在项目中经常会遇到预览pdf文件的需求,对pc端来说实现这样的功能相对简单,因为可以直接在浏览器中打开文件链接进行预览,这里就不再详细介绍了。今天主要介绍一下手机端页面如何实现pdf的预览,无论是手机端web项目还是app中嵌入的web页面,我们均可以通过pdf.js + iframe 的方式实现pdf文件的预览。

eeefengzi的博客 5283

CVAT本地部署保姆级教程:用Docker Compose在Ubuntu上5分钟搞定你的私有数据标注平台

本文提供CVAT本地部署的保姆级教程,详细讲解如何在Ubuntu系统上使用Docker Compose快速搭建私有数据标注平台。从环境准备、Docker配置到CVAT部署全流程,涵盖硬件要求、性能优化及安全加固等关键步骤,帮助开发团队5分钟内完成高效、安全的标注环境搭建。

weixin_42619742的博客 383

Modbus 通信协议详解

Modbus是由 Modicon(现为施耐德电气公司的一个品牌)在 1979 年发明的,是全球第一个真正用于工业现场的总线协议。ModBus网络是一个工业通信系统,由带智能终端的可编程序控制器和计算机通过公用线路或局部专用线路连接而成。其系统结构既包括硬件、亦包括软件。它可应用于各种数据采集和过程监控。为更好地普及和推动Modbus在基于以太网上的分布式应用,目前施耐德公司已将Modbus协议的所有权移交给 IDA(,分布式自动化接口)组织,并成立了 Modbus-IDA 组织。

Projectsauron 的博客 7万+

【移动端】vue脚手架项目手机实时预览方法

在很多情况下,开发移动端项目 为了避免模拟器与真机之间的差异,大部分情况需要使用真机进行实测。 非脚手架项目的手机实时预览方法相对比较简单,请参阅我的另一篇文章【移动端】移动端项目手机预览方法 而脚手架项目则需要进行一些简单的配置才能实现手机实时预览的效果 今天我们这里讲一下如何使用手机实时预览 VUE 脚手架项目: 1、打开我们的 vue 项目目录,找到 config →index.js 文件 2、在dev模块下,找到并修改 host 为 “0.0.0.0” (默认为local...

NAMECZ的博客 1449

QLIB使用tushare更新每日行情

0. 介绍 qlib每日数据的源是yahoo,更新速度较慢并且不稳定。tushare每日行情是免费接口,速度较快。 1. 获取行情数据,保存为csv格式。 def GetDataFromTushare(self, today, fpath): pro = ts.pro_api() df = pro.daily(trade_date=today) for index, row in df.iterrows(): code = row['ts_code']

weixin_44177216的博客 2897

Vue移动端开发如何在手机端时时预览

在开发移动端的时候,特别想在真机上看自己开发出来的成果,之前用的是 Ghostlab这玩意,可是呢,这玩意是要收费的,而且只有7天的体验时间,感觉有点不满足。 现在分享一个更加方便的方法,是在webpack工具构建在的vue项目,实现真机实时预览... 1.电脑和手机连接同一个wifi 用wifi共享大师开个wifi,手机连接,这都是常规操作啦2.查询本地IP地址WIN + R,输入cmd回车,...

qq_40126542的博客 958

YOLOv11改进,YOLOv11引入B2CNet的BFAM(双时相特征聚合模块),JSTARS 2024,二次创新C3k2结构

YOLOv11改进,YOLOv11引入B2CNet的BFAM(双时相特征聚合模块),JSTARS 2024,二次创新C3k2结构

在职AI算法工程师,擅长计算机视觉,YOLO目标检测、分割等,擅长web、pyqt界面可视化,好内容持续更新中,来这里跟大家一起学习,共同进步 408

用 XCO 库一键找出某个 ABAP 类的全部子类

ABAP XCO库子类枚举技术解析 本文介绍了在ABAP项目中如何利用XCO库高效获取类的继承层次结构。传统方法使用CL_ABAP_CLASSDESCR或手动维护映射表存在效率低、易遗漏的问题。新方法通过XCO库的IF_XCO_AO_CLASS接口,可简洁地获取父类的所有子类(包括间接子类)。 核心API链式调用: 获取类句柄:xco_cp_abap=>class() 导航子类集合:subclasses->all 获取结果:get()返回类引用表或get_names()返回类名列表 典型应用场景

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 127

Vue移动端项目手机实时预览

开发移动端的朋友们都懂得,模拟器测试6的飞起的时候,真机测试免不了来几个小bug。话不多说,我们来看看如何在手机实时预览vue项目~ (以下示例目录使用vue-cli脚手架生成) 1、第一步,打开我们的vue项目目录,找到config-->index.js文件 2、第二步,在dev模块下,将host配置改为"0.0.0.0" (默认为localhost) 3、第三步,把冰箱门带上.......

weixin_33843947的博客 1657

数学建模Matlab算法,第七章 对策论

对策论作为研究竞争与决策的数学理论,从零和对策到非常数和对策,为分析各类博弈问题提供了系统框架。其核心要素包括局中人、策略集和赢得函数,通过稳定解、Nash平衡点等概念揭示竞争规律。该理论广泛应用于经济、军事、政治等领域,不仅提供具体分析工具,更改变了决策思维方式,强调在互动中实现理性选择。对策论既揭示了竞争本质,也凸显合作价值,为解决社会矛盾、促进共赢发展提供了重要启示,在全球化背景下将发挥更大作用。

unber的博客 109

vue移动端项目如何在真机测试

通常大家在写移动端项目的时候都想在自己手机上测试一下看一下效果确保无误后在上线,虽然许多浏览器都有模拟手机功能但不如真机来的实在那如何测测试呢请看下面 第一步打开搜索栏输入cmd命令打开窗口 第二步输入ipconfig找到本机ip地址 第三步找到项目下的config文件下的index.js下的host:修改为本机ip地址 然后重新启动项目npm run dev 把项目地址复制下使用草料二维码生...

giao序员 1726

python爬虫项目(六十八):爬取电商平台用户购买历史数据,分析消费行为

本文详细介绍了如何爬取电商平台用户购买历史数据,并分析其消费行为。通过爬虫技术、数据存储、分析和可视化等步骤,可以深入了解消费者的行为特征。未来,随着数据分析技术的不断发展,利用人工智能和机器学习方法对消费行为进行更深层次的分析,将成为电商平台提升竞争力的重要手段。

斌擎科技 2768

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

如何利用手机预览intellij idea本地web项目运行效果(程序猿小小的乐趣——娱乐篇)

这也许就是传说中,程序猿的快乐吧。。。请秉着一颗平淡无奇的心阅读。。。 测试环境:拯救者Y7000P(一台可以开移动热点的笔记本电脑) ; Windows10 ; 一部可以上网冲浪的智能手机 我们在开发web项目的时候,不仅希望它可以在PC浏览器上显示的完美,还希望它可以在移动端完美适配。这个时候,有的人会选择使用Chrome浏览器的调试功能查看浏览效果,有的大佬会选择部署到服务器上查看,等等...

小名同学 21万+

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

让vue的项目可以在手机预览起来(不用内网穿透,只需要在局域网内)

     现在对于做网页来说,一般都是移动端的项目比较多,所以一开始我学vue的时候也是从移动端项目开始做,但是我们的开发工具是浏览器,虽然可以在chrome开发模式中用模拟手机预览效果,那么怎么通过真机去预览效果呢?     一开始我想到的是放在我自己电脑Apache配置好虚拟主机环境中,然后通过内网穿透直接让手机访问,但是使用vue-cli搭建项目需要进行npm run build得到的文件...

magic_xiang的博客 5549

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

手机预览vue开发移动端app界面的相关设置

需求 为了在手机上预览移动端的项目,以此进行调试 方法 手机和电脑需在同一个局域网下 电脑的防火墙需要关闭 项目中config目录下的index.js中关于localhost的设置如下 host: '0.0.0.0', 即需要将host:localhost改为hots:0.0.0.0 将pc端的localhost:8080/goods中的localhost用ip地址替代 将替代后的网址复制,黏贴到https://cli.im/,生成二维码 用手机扫二维码,即可查看相应的手机端界面。 参考文献 h

baiye 690

js 移动端测试方法总结

网页效果测试时,有时必须手机实际测试,总结了下平常用的方法

2222

手机加载电脑html,手机访问电脑本地html文件

如果用webstrom打开一个单独的页面,在浏览器中现实的地址是:http://localhost:63342/meipro-work/pages/active/findreset.html?_ijt=jhp5kumvugie2h6r0ublp089kf如果这恰好是你正在开发的用于移动端的页面,想要在手机上访问以便于测试验证效果,怎么访问到呢?在webstorm的setting中是有相关可设置的,...

weixin_39868959的博客 778

html预览本地doc,前端在本地启动服务预览html页面

在开发移动端项目时浏览器里出来的效果往往到真机上和预想的有出入,在开发过程中知道了一个可以在本地自己启动一个服务器在手机预览的办法。1、首先在终端安装http。npm i http-server -g。(g全局安装) 安装成功之后2、cd到需要查看的页面的文件夹处(该文件夹必须是包含js、css等所有文件的文件夹)例如:必须是memberPage这个文件夹(cd memberPage/) 3、可以...

weixin_32516009的博客 783

手机访问电脑打开的vue项目

1,将手机连接到与电脑相同的WIFI2,更改vue项目config文件夹下的index.js的host地址。默认为“localhost”,更改为自己电脑的ip地址。3,npm run dev 运行项目,复制路径生成二维码。手机扫一扫即可。...

v_111的博客 4890

关于用webpack并且实现在手机上面测试项目

假设你已经在使用webpack搭建模块化开发项目,跳过webpack的安装配置,接下来从如何实现手机端测试网页说起。 第一步用打开cmd  windows用户输入ipconfig查看,mac执行ifconfig查看里面的Ipv4地址 第二步 在webpack项目里面的package.json这个文件里面的‘script’下的‘dev’ 后面加上 --host 0

ggzw123的博客 3923

weex-eros+vue Android拍照并预览图片踩坑【小白向】

[TOC] 最近做一个移动端的手机拍照预览,碰了不少墙,但还是遇到好心人帮助,成功预览。感谢“小豬仔”~ 开干之前,请先阅读 Weex-Eros文档 和 Vue教程 Windows(其他环境暂时没尝试) 根据 Eros 文档要求安装配置环境,安装路径要改D盘的改D盘,不改的一路Next,链接文...

chubie3528的博客 586

手机访问本地vue项目

手机访问本地vue项目 1.vue配置修改: 1》config ->index.js修改host 2》pa’ckage.json的dev加上–host 0.0.0.0 2.重启项目 此时用手机打开运行成功的链接。 注意:手机和电脑必须在同一局域网内(连接同一个无线网)。如果此时还打不开,就把防火墙全部关闭 个人纪录,方便回忆 ...

learn_daydayUp的博客 1386

PC端、手机端在线预览文档组件react-file-viewer与npm构建内存溢出

用户上传文件后,pc端可以下载文件,但是手机端下载文件就很不方便,手机的端需要直接将附件查看,所以需要 react-file-viewer 这个npm包 可以根据自己本地开发环境npm的配置通过命令,在自己的前端目录下进行安装 npm installreact-file-viewer或者cnpm installreact-file-viewer 在页面中直接引用使用 import FileViewer from 'react-file-viewer'; <FileViewer ..

runrun117的博客 1196
上一篇: 【VUE】脚手架项目搭建详细流程
下一篇: 【VUE】关于修改数组后,页面不渲染的问题
NAMECZ
博客等级 码龄9年 175粉丝 64原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值