前端预览word文档的需求实现方案记录
记录前端预览word文档的需求实现
方案一：XDOC文档预览可以使用XDOC文档预览云服务来进行word文件的在线预览，直接去网站体验就知道怎么用了。https://view.xdocin.com/
使用方法1https://view.xdocin.com/view?src=你的文档地址
例如：https://view.xdocin.com/view?src=https%3A%2F%2Fview.xdocin.com%2Fdemo%2Fview.docx
优点：
实现简单，只需要将文件地址拼在url参数中即可，且在页面会生成对应的目录结构。
文档地址也可以是IP地址。
缺点：
缺少了首行缩进、页面间距等效果
文档地址必须是对外可访问的，内网则无法使用该方案
方案二：使用微软官方提供的在线预览工具(限制较多，不推荐)使用方法：1https://view.officeapps.live.com/op/view.aspx?src=你的文件的地址
优点：无缺点：
文件的地址只能是域名，且不能包含端口号
与XDOC文档预览一样文档地址必须是对外可访问的，内网无法使用该方案
方案三：使 ...
记一次前端首屏加载的优化
前端优化首屏加载时间
我接手vue2的一个旧项目，因为首屏加载很慢，要求我对此进行优化。我在此进行记录
一、分析加载慢的原因推荐使用webpack-bundle-analyzer插件，可以对打包后的文件大小进行可视化分析。简单好用
安装插件
1npm install webpack-bundle-analyzer --save-dev
在vue.config.js文件中添加对应配置
12345678910111213141516171819202122232425262728// 引入插件const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginmodule.exports = { publicPath: '/', lintOnSave: true, productionSourceMap: false, filenameHashing: true, configureWebpack: (config) => ...
JS各进制之间的转换
做算法机试题的过程中经常会遇到字符的比较，字符转为二进制、十六进制等的转化。时常会忘记具体的实现方法，现做一下总结帮助记忆
1.ASCII码和字符的转化使用 charCodeAt和fromCharCode
123var str = "A";var code = str.charCodeAt(); // charCodeAt获取字符对应的ASCII码var str2 = String.fromCharCode(code); // String的fromCharCode方法根据ASCII获取字符
2.十进制转二进制使用 toString(2)
12var a = 5a.toString(2) // '101'
八进制，十六进制同理，只需要将参数2改成8、16即可
1234var a = 64a.toString(8) // '100'var b = 15b.toString(16) // 'f'
注意这里前面的数是Number类型，转化为二进制后为String类型
3.二进制转十进制使用 parse ...
模板字符串的简单实现
由于前不久遇到一个前端笔试题，实现一个简易的模板渲染函数，但是没能做出来，于是在此进行总结记录。
题目大致内容如下：
12// 实现一个简易模板渲染// 例 renderTpl('我已经有${year}年${pos}开发经验了', {year: '2', pos: '前端'}) 输出 '我已经有2年前端开发经验了'
使用过ES6的模板字符串语法的人都知道，可以使用${}将变量包起来，替代原来ES5的+拼接字符串。这个函数要实现的功能正是如此。
因为是使用${}这种特定的语法，我们很容易想到，使用正则将${}里面的内容替换出来，填充我们定义的变量进去即可。这里使用到字符串的replace方法：(更多replace内容点这里)
1234567891011121314151617181920212223/** * 模板字符串的实现函数 * @param {String} ...
EventEmitter简单实现
由于前不久做某厂的前端笔试题，遇到这道题没能实现出来，于是在此进行总结记录。
EventEmitter是Node.js中提供的一个监听器类，类似于前端vue中的eventBus事件总线。
其原理主要是发布订阅者模式。
用订阅杂志进行类比，所有的杂志就是一个大对象： events: {}
意林是其中一款杂志，那么意林就是events对象中的一个属性，值为数组（因为订阅意林杂志的人可以不止一个）: events: {'意林': []}
当我订阅意林，那么我就应该收入倒意林数组中，让意林知道我订阅了它: events: {'意林': ['我']} (这里’我’是执行函数)
最后，当意林发布了新一期杂志时，那么我就会收到这一期杂志，也就是意林对数组中的’我’进行了执行。
当我觉得意林不好看了，那我就会取消订阅，于是乎在意林数组中将我移除即可。
如果我只想看下一期的意林，下下一期的意林我不想看了，那么我就进行单次订阅即可。（使用once方法）
下面这个` ...
css实现文本超出显示省略号
一、实现单行文本省略12345678910/* 原理：设置文字不换行，溢出后隐藏，截断显示省略符 */.ellipsis { width: 400px; background-color: pink; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}<p class="ellipsis">Lorem ipsum dolor sit amet, brute idque noster at nam. Et vix case.</p>
查看示例
二、多行文本省略1. 使用line-clamp属性1234567891011/* 原理：设置特定的display，使用-webkit-line-clamp属性设置溢出的行数，溢出后隐藏 */.ellipsis { width: 400px; background-color: pink; display: -webkit-box; -webkit-line-clamp: 2; ...
跨域问题解决方案
同源策略：
协议相同（protocol）
主机相同（host）
端口相同（port）
如果不满足同源策略的网络请求就形成了跨域。
一.解决方案之 jsonp：前端代码
123456789101112showJsonp = function (obj) { console.log(obj)}// 回调函数拼在请求参数中const url = 'http://localhost:3030/getTodoJsonp?callback=showJsonp'// 利用script标签的src属性发起请求，解决跨域的问题，但仅限于get请求const scriptEle = document.createElement('script')scriptEle.setAttribute('src', url)document.body.appendChild(scriptEle)scriptEle.onload = function () { document.body.removeChild(scri ...
前端下载二进制流文件
前后端对接时，后端常有返回二进制流文件的情况，前端需要下载或预览(pdf、html、图片文件等)。下面介绍几种实现前端获取二进制流并下载或预览的方式
1.直接预览二进制流文件如果返回的二进制流是一个pdf文件或图片文件。那么可以通过打开新标签页的方式进行文件预览。例如请求如下接口https://via.placeholder.com/150/24f355，返回一个图片文件，前端可以使用window.open("https://via.placeholder.com/150/24f355")来打开新标签页实现预览。当然这种情况是接口并没有做其他处理，如果接口需要验证token请求头使用window.open是无法设置请求头的。下面会介绍如何解决需要token的情况
2.使用Blob对象实现下载使用Blob对象实现下载主要分为以下几步：
设置接口请求的responseType值为'Blob'
创建Blob对象const blob = new Blob([data])
创建一个不显示的a标签，点击下载按钮时实际跳转a标签的地址，完成下载1234567 ...
前端面试题之手写原理
前言
前端开发中原生JS的理解一定要足够透彻，这篇文章主要介绍面试过程中可能会出现的实现JS中的关键字或一些特殊方法的原理题。由于经常看了就忘，于是在此做下记录。
实现new关键字要实现new方法的原理，首先要知道new操作符具体干了什么
在js中，new操作符用于创建一个给定构造函数的实例对象。
1234567891011// 定义构造函数Personfunction Person(name, age){ this.name = name; this.age = age;}Person.prototype.sayName = function () { console.log(this.name)}const person1 = new Person('Tom', 20)console.log(person1) // Person {name: "Tom", age: 20}t.sayName() // 'Tom'
注：如果构造函数中存在返 ...
vue项目结构分析
前言
在我目前的工中很少自己动手搭建一个项目，所以对于开发开始前的项目搭建以及项目各项配置相对理解的不够透彻。这次需要开发一个运行在终端上(类似ATM机的操作)的售楼签约系统。由于 UI 的不适配决定从头开始创建一个新项目。于是在此对项目的创建和配置做一个总结
创建 vue 项目可以有多种方式，这里介绍脚手架创建方式
全局安装vue-cli:
123npm install -g @vue/cli# ORyarn global add @vue/cli
创建一个项目:
12// 进到你希望项目放到的那个文件夹目录下，然后运行如下命令vue create XXX-XXX (项目名称)
运行完创建命令后会出现选择预设的选项，我这里选的是manually select features,然后选择了
Babel、Router、Vuex、CSS Pre-processors、Lint这些插件，并选择在创建单独的文件用于配置这些插件。
创建vue项目更多详细的内容可以访问 vue 脚手架创建项目
项目创建完成后，默认的目录展示如下：
主要分析有以下这些文件，点击文件可快速定位文件的位置 ...