通过 jspdf 插件将 html 某个标签在线转 pdf 文件

2021-1-13 Jon js库

前端开发中，有时会有将页面某个 div 的内容转成 pdf 文件，这将会用到 html2canvas 和 jspdf js插件来解决。

阅读全文>>

标签: js jspdf

评论(1) 浏览(4022)

浏览器使用 pdfobject js 插件预览 pdf 文件

2020-12-10 Jon js库

浏览器中直接访问 pdf 文件在线打开，而不是下载的方式，相当于 将 pdf 放入我们准备好的容器中进行预览，这种效果需要借助一个 js 插件 pdfobject.min.js，具体使用如下。

阅读全文>>

标签: js pdfobject

评论(0) 浏览(3519)

微信 js sdk 选择图片的使用

2020-9-25 Jon js库

微信 js sdk 选择图片的使用 见代码

阅读全文>>

标签: js

评论(0) 浏览(2750)

cesium 中https使用地球皮肤请求地址不安全问题

2019-10-1 Jon js库

在https环境下使用cesium时若是出现地球皮肤无法访问的问题 这时点击该地址会报不安全的网络 其实是因为早期的cesium版本中没有设计安全https皮肤地址 只需要更新最新的cesium即可，但是往往情况复杂不予许随便更新，又或者怕更新后出现新问题 那么只需要对之前的cesium.js文件进行修复即可 修复也是很简单 打开node_modules/cesium/Build/CesiumUnminified/Cesium.js 搜索Imagery/Metadata并找到如下代码 var metadataResource = this._resource.getDeri...

阅读全文>>

评论(0) 浏览(3121)

Angular 多环境配置

2019-5-19 Jon js库

实际开发中，我们经常需要配置多个环境，如：开发环境、测试环境、生产环境。 比如接口的地址在不同环境下各有一个地址，如： 开发环境：http://dev.xxx.xxx 测试环境：http://test.xxx.xxx 生产环境：http://www.xxx.xxx Angular给我们提供了一个很方便的方式，就是通过environment变量来控制 1、找到src/environments目录， 用@angular/cli工具创建的项目默认会有environment.prod.ts(生产环境) 和environment.ts(开发环境)，为了方便测试环境，我们再新建一个...

阅读全文>>

标签: 多环境

评论(2) 浏览(3108)

angular界面引导插件ngx-joyride的使用

2019-4-27 Jon js库

先看几个常用的jquery引导插件效果 1、intro.js 2、Bootstrap Tour  3、Bootstro.js  4、aSimpleTour  5、Joyride  如果在angular 中也使用上述jquery的插件当然也是可以的，但会产生以下几个问题： 1、要引入jquery库，这就增加的代码量，而且用到的部分并不多，导致代码冗余。 2、因为是基于jquery 的所以对dom的操作较为频繁，性能上也会产生影响。 3、对angular组件化、模块化方式操作不友好，使用较为繁琐。 这时，我们需要一种基于angul...

阅读全文>>

标签: 插件

评论(0) 浏览(3390)

angular 中的路由简单的配置详解

2019-4-21 Jon js库

1.重定向路由配置 const routes: Routes = [ {path:'', redirectTo: '/home', pathMatch:'full'}, {path:'home', component: HomeComponent }, // 默认展示HomeComponnet {path:'about', component: AboutComponent} ]; 作用就是可以指定访问某个路由时跳转到其它路由，如上述所示当访问的是根路由时则直接重定向到home路由，展示HomeComponent组件的内容。 pathMatch: 'full'表示全部符合才...

阅读全文>>

标签: angular

评论(0) 浏览(2746)

angular 中的路由守卫CanActivate、CanDeactivate、Resolve

2019-2-26 Jon js库

一、路由守卫 当用户满足一定条件才被允许进入或者离开一个路由。 路由守卫场景： 1、某些路由用户未登录无法进入（登录） 2、某些路由用户没权限无法进入（权限） 3、不可跳过中间步骤直接访问某一步骤路由（注册流程、步骤条） 4、当用户未执行保存操作而试图离开当前导航时提醒用户（防止误操作） 5、用户进入某路由前获取该路由需要的数据（提升用户体验） Angular提供了一些钩子帮助控制进入或离开路由。这些钩子就是路由守卫，可以通过这些钩子实现上面场景。 CanActivate: 是否允许进入某路由（场景1、2、3） CanDeactivate: 是否允许离开某路由（场景4）...

阅读全文>>

标签: 路由

评论(0) 浏览(4135)

前端mvvm框架中双向绑定的原理和实现

2019-1-24 Jon js库

1、通过Object.defineProperty(obj, prop, descriptor)劫持对象的属性读写，其中obj是要在上面定义属性的对象，prop是要定义或修改的属性名称，descriptor是属性的描述符。描述符中可选get和set键值。get是属性的getter方法，返回属性值；set为setter方法，接受唯一参数，并将该参数的值赋值给属性，get和set的默认值均为undefined。 2、双向绑定的简单实现。 <input type="input" id="input"> <span id="show">&...

阅读全文>>

标签: 底层 框架

评论(0) 浏览(2761)

前端路由之angular路由配置的区别#和/

2018-12-9 Jon js库

先说下什么是前端路由 以前路由都是后台做的，通过用户请求的url导航到具体的html页面，这种无法做单页应用 而一般要前端单页应用项目就会需要用到前端路由 现在我们在前端可以利用 Angular、vue、react等通过配置文件，达到前端控制路由跳转的功能。 前端路由的实现方法 1.通过hash实现 当url的hash发生改变时，不触发网页重载，触发hashchange注册的回调，回调中去进行不同的操作，进行不同的内容展示。 使用hash来实现的话，URI规则中要带上#，路由中#后边的内容就是hash 如 http://localhost:4200/#/home/pa...

阅读全文>>

标签: 路由

评论(0) 浏览(3787)

Angular 模块懒加载和预加载策略

2018-6-12 Jon js库

angular2及以上提供了两个非常实用的特性：懒加载和预加载 一、理论 1. 什么是懒加载？ 懒加载也叫延迟加载，在访问到这个模块的时候，Angular才会加载这个模块。 2. 为什么要使用懒加载？ 我们知道一个项目做得比较大的时候，模块组件比较多的时候，代码的体积也就相应增加，执行时间相应延长，这样会使得页面首次打开加载时长增大，用户体验下降。使用懒加载可以很好地解决这个问题，让开始只加载需要用户需要的代码，后续用户交互时再加载对应的代码，可以大幅提升首屏用户体验，让用户感觉到首屏很快，但是随之带了的是用户第一次去查看懒加载模块时，这个时候懒加载模块菜开始加载，会有个加载等待的延...

阅读全文>>

标签: angular

评论(0) 浏览(3642)

select2 默认不选中以及动态改变数据

2018-6-6 Jon js库

select2 使用总结 记录 select2 一般比较难查到的功能   加载数据并默认不选中   加载数据后动态改变数据（包含清空数据） Document section { margin: 30px; } /* 重置了选择框样式 */ .form-cont...

阅读全文>>

标签: select2

评论(0) 浏览(4618)

angular 如何在打包发布时清除console信息

2018-5-28 Jon js库

问题 console一般是我们开发时 用于测试打印到控制台的数据 以便我们调试程序 当项目打包上线时 这些console已然无用 这个时候还在控制台打印出来 如果打印的是一些敏感信息 就没那么安全了 并且还会影响美观 我们如果只是简单的查找代码中的console并删除 会有几个问题 1、工作量比较大（如果你使用console多的话） 2、如果你使用了一些插件，那么插件中的console删起来比较繁琐 3、如果后期想要开发环境上再次打印，则又要重复写和删 分析 那么既然我们开发环境需要而生产环境不需要 那么我们可以通过判断当前环境是开发还是生产 从...

阅读全文>>

标签: angular

评论(0) 浏览(3206)

基于angular-cli配置代理解决跨域请求问题

2017-10-11 Jon js库

1.跨域请求产生 随着不同终端(Pad/Mobile/PC)的兴起，对开发人员的要求越来越高，纯浏览器端的响应式已经不能满足用户体验的高要求，我们往往需要针对不同的终端开发定制的版本。为了提升开发效率，前后端分离的需求越来越被重视，后端负责业务/数据接口，前端负责展现/交互逻辑，同一份数据接口，我们可以定制开发多个版本。  而前后端分离带来的一个问题就是前端web部署的服务器和后端提供服务的服务器大概率不在同一个域名下，进而会产生跨域问题。 2.通用解决方案 如果浏览器支持HTML5，那么就可以一劳永逸地使用新的跨域策略：CORS了。&nbs...

阅读全文>>

标签: angular

评论(0) 浏览(3078)

摆脱令人抓狂的ESlint 语法检测配置说明

2017-8-10 Jon js库

最近学习Vue，通过vue-cli脚手架创建的项目环境，写了段时间后，发现这个ESlint语法检测真是令人抓狂！！！ 所以不得不停下手中的代码去学习下ESlint的规则配置。 其实我并不反对这些语法检测，但是像许多反个人意愿的那就真的不得不吐槽了，比如vue-cli脚手架创建的默认eslint规则： 代码末尾不能加分号 ; 代码中不能存在多行空行 tab键不能使用，必须换成两个空格 代码中不能存在声明了但未使用的变量 以上规则个人认为真的反人类！调试代码太难了。 好吧进入正题... 关闭eslint 这里只说vue-cli脚手架的关闭方法，其实很简单，就是把...

阅读全文>>

标签: vue

评论(2) 浏览(3087)