Vuex 1.state的使用 首先在src文件夹下面建一个store文件夹作为仓库 store里创建一些js文件作为相对应的存储空间 例如 store.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.store({ state: { //状态管理 count: 1 }, getters: { //获取状态值 getCount: function(state){ return state.count * 5 } }, mutations: { //操作状态 add: function(state){ state.count += 1 } }, actions: { //异步操作状态 addFun: function(context){ context.commit('add') } } }) |
在vue组件中使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
在插值表达式里 {{$store.state.count}} computed:{ count(){ return this.$store.state.count } } 更新state的值 methods: { change(){ this.$store.commit('add',args) //同步操作，可以有选择性的传参 }, asyncChange() { this.$store.dispatch('addFun') //异步操作 } } |
2.mapState的使用 1.在.vue组件中引入,在js块中引入
|
1 |
import { mapState } from 'vuex' |
2.在.vue组件中使用，一般放在computed里可以监听到状态改变
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
computed：{ ...mapState([ //mapState本是一个函数，在里面写一个数组，记得加... ‘num’ ， //存的数据 ‘id’ ]) } 或 computed: { ...mapState({ num: (state)=>state.num, //这种用法可以看作为起别名 id: (state)=>state.id }) } mapAction的使用 正常action的使用 this.$store.dispatch('function',args) mapAction import {mapActions} from 'vuex' methods: { ...mapActions(['fun1','fun2','fun3']) 或 ...mapActions({ fun1: 'fun1', fun2: 'fun2' }) } mapMutations的使用 //关于传参问题，直接在调用的地方传参 正常mutation的使用 this.$store.commit('function',args) mapMutations的使用 import {mapMutations} from 'vuex' methods:{ ...mapMutations(['fun1','fun2']) 或 ...mapMutations({ fun1: 'fun1', fun2: 'fun2' }) } |
混入 (mixin) 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 **组件的思想主要是用来解决重复码有相似功能的代码，并使其标准化，统一化，但在前端更多是体现在界面上的视觉效果，如果要实现功能大体相同，界面需要个性化，但又不想传入过多的props怎么办呢 这时mixin便有了其用武之地，可以使用相同的js逻辑，template和css自定义就好了** 具体使用： 先在src下建一个文件夹mixin 然后在该文件夹下创建你需要按功能取名的js文件 例如common.js
|
1 2 3 4 5 6 7 8 9 |
const toggle = { //你需要引入哪些就加哪些 data(){ return {} }, created(){}, methods:{} ... //还可以添加 } export toggle |
在.vue文件中使用
|
1 2 3 4 |
import { toggle } from '@/mixin/common.js' export default { mixins: [toggle] } |
注意：如果混入里的东西和组件内的有冲突，会使用组件内的，欲安内必先攘外 全局混入 在main.js中定义
|
1 2 3 4 5 |
Vue.mixin({ created: function () { } ... // 省略 }) |
from:https://segmentfault.com/a/1190000020617036
View Details1. vue脚手架
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
用来创建vue项目的工具包 创建项目: npm install -g vue-cli vue init webpack VueDemo 开发环境运行: cd VueDemo npm install npm run dev 生产环境打包发布 npm run build npm install -g serve serve dist http://localhost:5000 |
2. eslint
|
1 2 3 |
用来做项目编码规范检查的工具 基本原理: 定义了很多规则, 检查项目的代码一旦发现违背了某个规则就输出相应的提示信息 有相应的配置, 可定制检查 |
3. 组件化编程
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
vue文件包含3个部分 <template> <div></div> </template> <script> export default { props: []/{} data(){}, computed: {} methods: {}, watch: {} filters: {} directives: {} components: {} } </script> <style> </style> 组件化编码的基本流程 1). 拆分界面, 抽取组件 2). 编写静态组件 3). 编写动态组件 初始化数据, 动态显示初始化界面 实现与用户交互功能 组件通信的5种方式 props vue的自定义事件 pubsub第三方库 slot vuex(后面单独讲) props: 父子组件间通信的基本方式 属性值的2大类型: 一般: 父组件-->子组件 函数: 子组件-->父组件 隔层组件间传递: 必须逐层传递(麻烦) 兄弟组件间: 必须借助父组件(麻烦) vue自定义事件 子组件与父组件的通信方式 用来取代function props 不适合隔层组件和兄弟组件间的通信 pubsub第三方库(消息订阅与发布) 适合于任何关系的组件间通信 slot 通信是带数据的标签 注意: 标签是在父组件中解析 vuex 多组件共享状态(数据的管理) 组件间的关系也没有限制 功能比pubsub强大, 更适用于vue项目 |
4. ajax
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
相关库: vue-resource: vue插件, 多用于vue1.x axios: 第三方库, 多用于vue2.x vue-resource使用 // 引入模块 import VueResource from 'vue-resource' // 使用插件 Vue.use(VueResource) // 通过vue/组件对象发送ajax请求 this.$http.get('/someUrl').then((response) => { // success callback console.log(response.data) //返回结果数据 }, (response) => { // error callback console.log(response.statusText) //错误信息 }) axios使用 // 引入模块 import axios from 'axios' // 发送ajax请求 axios.get(url) .then(response => { console.log(response.data) // 得到返回结果数据 }) .catch(error => { console.log(error.message) }) |
5. vue-router
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
vue用来实现SPA的插件 使用vue-router 1. 创建路由器: router/index.js new VueRouter({ routes: [ { // 一般路由 path: '/about', component: about }, { // 自动跳转路由 path: '/', redirect: '/about' } ] }) 2. 注册路由器: main.js import router from './router' new Vue({ router }) 3. 使用路由组件标签: <router-link to="/xxx">Go to XXX</router-link> <router-view></router-view> 编写路由的3步 1. 定义路由组件 2. 映射路由 3. 编写路由2个标签 嵌套路由 children: [ { path: '/home/news', component: news }, { path: 'message', component: message } ] 向路由组件传递数据 params: <router-link to="/home/news/abc/123"> props: <router-view msg='abc'> 缓存路由组件 <keep-alive> <router-view></router-view> </keep-alive> 路由的编程式导航 this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面) this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面) this.$router.back(): 请求(返回)上一个记录路由 |
from:https://blog.csdn.net/w789g4/article/details/91046416
View DetailsECMAScript 6(ES6) 目前基本成为业界标准，它的普及速度比 ES5 要快很多，主要原因是现代浏览器对 ES6 的支持相当迅速，尤其是 Chrome 和 Firefox 浏览器，已经支持 ES6 中绝大多数的特性。 ES6 下面逐一为大家详解常用的ES6新特性： 1.不一样的变量声明：const和let ES6推荐使用let声明局部变量，相比之前的var（无论声明在何处，都会被视为声明在函数的最顶部） let和var声明的区别：
|
1 2 3 4 5 6 |
var x = '全局变量'; { let x = '局部变量'; console.log(x); // 局部变量 } console.log(x); // 全局变量 |
let表示声明变量，而const表示声明常量，两者都为块级作用域；const 声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改了：
|
1 2 |
const a = 1 a = 0 //报错 |
如果const的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址没有变就行：
|
1 2 3 4 |
const student = { name: 'cc' } student.name = 'yy';// 不报错 student = { name: 'yy' };// 报错 |
有几个点需要注意： let 关键词声明的变量不具备变量提升（hoisting）特性 let 和 const 声明只在最靠近的一个块中（花括号内）有效 当使用常量 const 声明时，请使用大写变量，如：CAPITAL_CASING const 在声明时必须被赋值 2.模板字符串 在ES6之前，我们往往这么处理模板字符串： 通过“\”和“+”来构建模板
|
1 2 3 |
$("body").html("This demonstrates the output of HTML \ content to the page, including student's\ " + name + ", " + seatNumber + ", " + sex + " and so on."); |
而对ES6来说 基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定； ES6反引号()直接搞定；
|
1 2 |
$("body").html(`This demonstrates the output of HTML content to the page, including student's ${name}, ${seatNumber}, ${sex} and so on.`); |
3.箭头函数（Arrow Functions） ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体； 箭头函数最直观的三个特点。 不需要 function 关键字来创建函数 省略 return 关键字 继承当前上下文的 this 关键字
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// ES5 var add = function (a, b) { return a + b; }; // 使用箭头函数 var add = (a, b) => a + b; // ES5 [1,2,3].map((function(x){ return x + 1; }).bind(this)); // 使用箭头函数 [1,2,3].map(x => x + 1); |
细节：当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return； 4. 函数的参数默认值 在ES6之前，我们往往这样定义参数的默认值：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// ES6之前，当未传入参数时，text = 'default'； function printText(text) { text = text || 'default'; console.log(text); } // ES6； function printText(text = 'default') { console.log(text); } printText('hello'); // hello printText();// default |
5.Spread / Rest 操作符 Spread / Rest 操作符指的是 …，具体是 Spread 还是 Rest 需要看上下文语境。 当被用于迭代器中时，它是一个 […]
View Details今天呢，就说一说mixins和组件，经常使用vue框架的朋友对这两个应该是不陌生的，他们两个的用法功能好像在项目中的所扮演的角色差不多。我们就带着这个疑问进行扒一扒吧 我们先从api文档中看一看官方是如何定义他们的。 mixins：混入，是一种分发Vue组件中可复用功能的非常灵活的方式，混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。 组件：是vue最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码，在较高层面上，组件是自定义的元素，vue的编译器为它添加特殊功能，在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展 在我的眼中呢，他们的区别是什么呢？ 组件在引用之后，相当于在副组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，但本质上两者还是泾渭分明的，相对独立 而mixins则是在引入组件之后，将组件内部如data等方法，method等属性与父组件相应内容进行合并，相当于在引入后，副组件的各种属性方法被扩充了 组件之间是可以有通信的，而mixins比组件多了一个data的merge。两者使用的场景不同，具体的还要在不同的项目中进行决定使用mixins好还是组件合适 未完待续哦。。。 作者：都市尘埃i 链接：https://www.jianshu.com/p/f2a897cd3d7b 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
View Details授权协议: MIT 开发语言: JavaScript HTML/CSS 操作系统: 跨平台 开发厂商:阿里巴巴 收录时间: 2015-07-27 提 交 者:叶秀兰 Ant Design 是蚂蚁金服开发和正在使用的一套企业级的前端设计语言和基于 React 的前端框架实现。 特性 企业级金融产品的交互语言和视觉体系。 丰富实用的 React UI 组件。 基于 React 的组件化开发模式。 背靠 npm 生态圈。 基于 webpack 的调试构建方案，支持 ES6。 示例
|
1 2 3 4 |
<span class="hljs-keyword">var</span> antd = <span class="hljs-built_in">require</span>(<span class="hljs-string">'antd'</span>); <span class="hljs-keyword">var</span> Datepicker = antd.Datepicker; React.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-name">Datepicker</span> /></span>, mountNode);</span> |
开发说明 本地调试
|
1 |
<span class="hljs-meta">$</span><span class="bash"> npm start</span> |
然后访问 http://127.0.0.1:8000 。 网站部署
|
1 |
<span class="hljs-meta">$</span><span class="bash"> npm run deploy</span> |
版本构建
|
1 |
<span class="hljs-meta">$</span><span class="bash"> npm run release</span> |
from:https://www.oschina.net/p/ant-design
View Details最近社区针对框架的争论，从发文互怼再到粉丝站队再到大漠穷秋准备离职，令人唏嘘不已。不知从何而起，前端圈已经逐步变成了前端娱乐圈。越来越多的人开始站队 Angular、Vue、React，仅仅围绕这些库或者框架进行前端技术讨论，这实在不是什么好的现象。其实我想基于我个人的经验聊下前端的演进和未来，希望可以贡献微薄的力量，消除一些我个人认为的前端社区不太好的风气。 注意：以下只是我个人对于前端和业务的理解和感悟，不代表任何其他人和我所在公司、团队的观点，意见不同欢迎一起讨论。 ======== 以史为鉴，想要知道前端的未来，必须知道前端的过去，抽象前端发展的规律。 前端的历史 前端的发展始终伴随着端的发展。 PC 端的兴起 06 年左右国内互联网公司开始有了前端工程师的概念，原因很简单，是因为上网访问网页的人数增多，大型互联网公司为了提升用户体验专门剥离了这样一个岗位来解决相关问题。这是第一批专业前端工程师的起源。 在这几年中的发展，进行了很多轮的技术方案、框架、浏览器的演进。比如 jQuery 兼容性库，再到 Require.js 异步加载，再到现在 React、Vue、Angular 等附带编程思想的前端库以及前后端分离、前端构建器、样式预处理器等。这些演进都是随着 PC 端的用户量的增多和业务复杂度的提升，为了用户体验和开发者体验而进化的。 移动端的兴起 09 年左右，智能手机的兴起导致了移动端开发的热潮。人人拥有智能手机，这种特殊的端的特性，也产生了新的业务形态。因此无线前端相关需求开始爆发，无线前端开发、iOS/Android 工程师等需求量非常大。 这几年中的发展，先从最初把 PC 端页面放在手机上渲染，再到出来响应式设计的概念，再到专门做无线端页面，再到独立客户端和 Weex、React Native 这些跨终端的方案。也是出现了非常多的技术演进，这些演进不难看出也是因为用户量的增多和业务复杂度的提升，为了用户体验和开发者体验而进行优化的。 PC 端的衰落 14 年左右，其实 PC 端颓废之势早已显现，但在双十一下被放大。因此阿里系前端在这个时间点附近就开始弱化 PC 端前端的投入。 以前 PC 端业务，在无线端流量更大的直接被下掉，核心链路的 PC 端业务能用就可以了，不再做效果、功能迭代优化。甚至很多业务直接不做 PC 端只做无线端。业务指标也从 PC 的 PV、UV 变成了客户端的 DAU 等指标。 在这个时间，只做 PC 端的前端，毫无无线端经验的前端，将会慢慢丧失竞争力。PC 兼容库 jQuery 之流也渐渐被替换废弃，因为 PC 的业务很少花费精力做兼容性测试，甚至目前我们团队的业务从来都只测试最新版 Chrome。可以看到，随着端和业务形态的变化，很多前端演进的产物会逐步被替换废掉。 移动端的衰落 移动端目前还没有衰落，但一个端只要兴起，就会有衰落的时候。总会有新的、更好的、更高效的端来替代老的端。但这个时机是难以预测的。 前端的未来 回顾前端的历史，前端总是伴随的端的变化而变化： 端的出现 -> 业务场景的落地 -> 需要端的开发者 -> 端开发者学习、演进 -> 端的开发效率提升 -> 新的端出现 -> 端的没落 -> 端开发者转领域或者被淘汰 这也就是为什么前端需要学习这么多东西，有这么庞大的体系的原因。每一个端都有它自己的特性。比如未来可能会火的 VR、AR 端，它们的特性就不同于二维平面的移动端，掌握 VR、AR 端的开发就需要新学习很多三维图形图像以及图像识别领域的东西。 因此如果你想要知道前端的未来，你需要预测端的发展。但端的发展是很难预测的，回到 06 年，有谁会想到会有智能手机，并开创了移动端这个端？ 而现在火热的 […]
View Detailsrandom() 方法可返回介于 0 ~ 1 之间的一个随机数。 这里有几种用法： 1.从数组中随机获取成员 var items = [12,a,9,p,8]; var randomItem = items[Math.floor(Math.random() * items.length)]; 2.生成从0到指定值的数字数组 var numbersArray = [] , max = 100; for( var i=1; numbersArray.push(i++) < max;); // numbers = [1,2,3 … 100] 3.生成随机的字母数字字符串 function radomcharnum(len){ var str = ""; for(;str.length<len;str+=Math.random().toString(36).substr(2)); return str.substr(0,len); } 3.得到指定范围的整数(需要Math.floor()或者parseInt()或者Math.ceil()) var randomNum = Math.random()*5; console.log(parseInt(randomNum));//1 console.log(Math.floor(randomNum));//0 Math.floor(Math.random()*(max-min+1)+min);//max为期待的最大的数，min为最小的数 使用parseInt也是可以的。 from:https://www.cnblogs.com/Catherine001/p/7265597.html
View Details首先要明白的是axios是什么：axios是基于promise（诺言）用于浏览器和node.js是http客户端。 axios的作用是什么呢：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。 特点：支持浏览器和node.js 支持promise 能拦截请求和响应 能转换请求和响应数据 能取消请求 自动转换JSON数据 浏览器支持防止CSRF（跨站请求伪造） 这里你一定会想promise是什么东西，以下是promise的个人理解： promise是什么：是一个对象用来传递异步操作的信息，它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的api，可供进一步的处理。 promise的作用：Promise的出现主要是解决地狱回调的问题，比如你需要结果需要请求很多个接口，这些接口的参数需要另外那个的接口返回的数据作为依赖，这样就需要我们一层嵌套一层，但是有了Promise 我们就无需嵌套。 promise的本质是什么：分离异步数据获取和业务 基本使用方法： axios执行GET请求 GET 请求方法 执行POST请求 POST请求方法 执行多个并发请求 多个并发请求 get和post都是基于promise的所以写法上很相似，是用then和catch，使用这种方法来进行发送请求。 还有一个axios重要的知识点就是拦截器 拦截器 在请求或响应被 then 或 catch 处理前拦截它们（拦截器可以做什么：在请求或者响应时拦截下来进行处理） 拦截器分为请求拦截器和响应拦截器 请求拦截器（interceptors.requst）是指可以拦截每次或指定HTTP请求，并可修改配置项。 响应拦截器（interceptors.response）可以在每次HTTP请求后拦截住每次或指定HTTP请求，并可修改返回结果项。 拦截器的写法 拦截器的工作流程： 拦截器工作流程 移除拦截器 移除拦截器 自定义 axios 实例添加拦截器 添加拦截器 取消 使用 cancel token 取消请求 可以使用 CancelToken.source 工厂方法创建 cancel token 参考资料：axios中文文档 from:https://www.jianshu.com/p/13cf01cdb81f
View Details页面之间的跳转传参，正常前端js里写 window.location.href="xxxxx?id=1" 就可以了； 但是vue不一样 需要操作的是路由history，需要用到 VueRouter, 示例： 常用的场景是：列表页点击“查看”按钮，跳转到详情页。 在列表页（list.vue）按钮点击事件里写上
|
1 2 3 4 |
<span class="token function">detail</span><span class="token punctuation">(</span>row<span class="token punctuation">)</span> <span class="token punctuation">{</span> this<span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">"detail"</span><span class="token punctuation">,</span> query<span class="token punctuation">:</span> <span class="token punctuation">{</span> id<span class="token punctuation">:</span> row<span class="token punctuation">.</span>id <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
运行时浏览器地址栏展示： http://localhost:8080/#/orders/detail?id=31 在详情页(detail.vue)里写上
|
1 2 |
<span class="token keyword">let</span> id <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span> |
即可获取到参数id了。 解析 先看看 route是什么,在vscode f12后 看到
|
1 2 3 4 5 6 7 |
<span class="token keyword">declare</span> module <span class="token double-quoted-string string">"vue/types/vue"</span> <span class="token punctuation">{</span> <span class="token keyword">interface</span> <span class="token class-name">Vue</span> <span class="token punctuation">{</span> <span class="token variable">$router</span><span class="token punctuation">:</span> VueRouter<span class="token punctuation">;</span> <span class="token variable">$route</span><span class="token punctuation">:</span> Route<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。 VueRouter官网 传送门 route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等 其中 params {}对象，包含路由中的动态片段和全匹配片段的键值对 用来实现 /order.detail/1 query {}对象，包含路由中查询参数的键值对。 用来实现 /order/detail?id=1 from:https://www.jianshu.com/p/45163cb031be
View Details项目中 显示 pdf 的功能,浏览过不少的技术帖,都不太理想,花了点时间研究了下pdf.js正确使用方法,总结下:1.防止自己忘记 2.工作留有痕迹 3.供大家参考借鉴
|
1 2 3 4 5 6 7 |
pdf.js: 将 PDF 文件解析后生成一张 .png 图片,利用 canvas 元素显示在页面上,此方法不推荐使用, 呈现在页面上的pdf会模糊,目前没有找到有效解决办法,给爱钻研的小伙伴提供个思路,在pdf.js官网上有这样一句话 : Each PDF page has its own viewport which defines the size in pixels(72DPI) and initial rotation. 猜想如果可以改变默认72DPI就可改变呈现的清晰度 |
上面是最开始探索 pdf.js 使用的方法 时 的猜想 其实 pdf.js 真正使用方法非常简单 (一行代码就可以搞定) pdf.js使用步骤 一. 到官网下载 pdf.js 插件并解压 (地址: http://mozilla.github.io/pdf.js/ ) 1: 进入官网 2 : 选择稳定版 下载 3: 下载至本地 4 : 解压 5:创建PDF.js文件夹 并将刚解压的文件放入其中 二.将 PDF.js 文件夹 放到 项目服务器根目录下 小伙伴 可能会有点头晕 先跟着做 稍后解释 1.登录 项目服务器 2.登录 服务器 后将 PDF.js 文件夹 拷贝 到 项目 服务器 的根目录 三. 使用 pdf.js 显示 pdf 文件 1.打开浏览器 新建一个 标签页 输入 你的项目服务器 地址 这里我用我的服务器 地址进行演示 10.0.0.5 2.当 你访问 项目 服务器 根目录(10.0.0.5) 能够 看到 PDF.js 这个文件夹 说明 这一步已经完成了 3.在PDF.js 中 依次打开 web 文件夹 viewer.html 文件 (PDF.js/web/viewer.html) 4.随后会显示 截图上的 […]
View Details