1 梦开始

项目中要使用pdf预览功能，当时我想：这个我熟阿，pdf.js绝对是首选技术，因为它兼容IE9版本以上，Chrome等主流浏览器更是没问题。于是去 pdf.js官网直接找到主流版本2.5.207下载下来，经过一把soul后，最终在Chrome浏览器和IE浏览器打开都能正常预览，心里想：这事到这就算结束了

提一嘴：为什么说2.5.207是主流版本，因为该版本对IE的兼容性很好，不少文章都提到过该版本下能完美兼容IE：例如：

vue项目使用pdfjs插件预览pdf 不兼容QQ浏览器和搜狗浏览器问题兼容各大主流浏览器办法

pdf.js兼容ie9浏览器及以上版本

不知道怎么下载2.5.207版本的，可以到我的百度云分享下载

链接：https://pan.baidu.com/s/1zpHKqm4ZlWX5Y4QBqPPvxA?pwd=imnk

提取码：imnk

2 梦初灭

当项目上线后，IE用户发现了这么个BUG：进入预览页面偶尔能浏览正常，偶尔失败，而且失败很频繁

技术经理赶紧找到了我，让我把这个问题解决掉，相信大家都知道，这种偶然性BUG解决起来特别麻烦。

我本地项目跑起来，确实也复现了这个问题，进入页面偶尔行，偶尔不行，注意：有的版本会报 undefined 这个错误，有的版本会报 意外地调用了方法或属性访问 ，如果你要问我为什么知道的，我就该上图了

我把很多版本都测试了一遍，然并卵，要么就是IE不支持高版本，要么就是报那两个错误，但这两个错误其实都是同个问题导致的，这里暂且先买个关子

报 undefined 这个错误时，总是会伴随着 Unhandled promise rejection undefined 的错误

可以看出来这是promise函数下的一个错误，但是由于IE下无法点击错误定位到相关的错误，所以你很难根据源码去找到错误的位置，这就没了思路去解决该错误

报 意外地调用了方法或属性访问 这个错误时，能点击错误找到对应的错误位置

遇到这些错误，我们仍然习惯性的去网上找办法，看看有没有人和自己的境遇相同

然而搜了大半圈，我惊奇的发现：似乎没有人和我遭遇相同，还是说我使用的姿势不对？于是我问了我另外一些做技术相关的朋友，他们也有用到pdf.js这个插件的，结果在IE也是二次刷新报错，只不过他们客户都不是IE用户，所以暂时没有发现这个问题。

既然没人解决这个问题，我就尝试自己解决。

我开始分析上面代码：第一次进入页面时，代码到这都能正常执行下去，唯有刷新页面后，代码到这里就会抛异常，当时也挺郁闷，尝试了各种try catch，debugger，发现xhr从上面创建到这的变量内容每次都是一样，于是我就郁闷了：为什么只有第一次才好使，后面就不行呢？？

那个时候，我开始debugger逐行分析，然而每次分析都好像徒劳，因为从上到下，从xhr创建到xhr.open，每个步骤的函数变量内容都是一样的，为什么后面就抛异常呢？我思来想去始终都没琢磨明白。

终于苦心不负有心人！在自己的坚持下，发现了规律：每次我修改代码后，ctrl+s保存代码，由于我在vue.config.js设置了 hotOnly: true 的热更新机制，所以都会自动重新执行一遍代码编译，而每次编译后页面都会重新刷新加载一遍，我发现IE正是在这种重新编译重新刷新页面的机制下，每次pdf预览都能正常！

这个时候我又疑惑了：为什么重新编译导致的页面刷新能够预览正常，而手动刷新页面就不好使？难道在IE浏览器中页面刷后，变量不都是重新创建、赋值的吗？还是说webpack的机制导致某些变量有缓存，而代码重新编译后才使的这些变量重新被销毁、创建？

这些都是我的猜想，然而即使这些猜想成立，我又该如何去修复？这使我到了进退两难的地步。

4 梦迹追踪

突然我灵光一闪，既然是有什么缓存机制导致的，我清除IE的本地缓存会不会好使呢？我赶紧尝试了一下，发现：天啊！果然如此，每当我清除缓存时，页面就好使了！

于是我为了证明自己的想法，满怀激动的在页面上加入上：

window.localStorage.clear();
window.sessionStorage.clear();
这时哪管的上：这么做会把所有缓存都清理了导致的后果，此时只想证明自己的想法是对的！然而现实就是给你一点糖，又恶狠狠的给你一巴掌！ 
缓存是都清理，但问题还在！ 
坚持不气馁的我，又尝试ctrl+shift+del调出IE的清缓存工具，手动清理一遍，结果噢了！！ 
每次我清理后，刷新页面都能正常的预览，此时IE的清理勾选项如下： 
我尝试逐个勾选尝试，直到只勾选第二项：临时Internet文件和网站文件删除时，页面每次刷新都正常 
5 修梦之旅
 
既然知道了问题所在，咱能不能说通过代码给他解决呢？ 
于是我又就网上搜索相关技术 
还是很遗憾，没有相关的技术，我开始寻找这个临时文件的文件夹 
解决方法： 
控制项目不产生临时文件
 优点：从根源解决问题，没有临时文件，IE也不会出现这个问题 
缺点：消耗资源大，由于该设置是在index.html的meta标签中设置，一旦设置所有页面都不再产生临时文件，导致每次访问都需要重新加载资源 
在所有的PDF预览页面的路由中新增个时间戳
 优点：操作简单 
缺点：由于每次新增的时间戳都不一样，所以临时文件都会新增一个，例如我刷新四次当前PDF预览页面，就会产生四个临时文件
  
我的解决方案：采用第二种方法解决，第一种先暂且不说加上这个标签后，导致所有页面都不会产生临时文件，以至于每次访问每个页面都要加载过一次资源！其次这种方法还需要Nginx的配合，详细可看： 
使用Cache-Control: no-store头，禁止IE浏览器保存临时文件，保护机密信息 
html设置Cache-Control：no-cache/ no-store来禁止页面缓存，不起作用。 
解决思路： 
相关代码： 
function timeStamp(url) {
    let currentTime_stamp = new Date().getTime()
    if (url.indexOf('?') > -1) {
      let start = url.indexOf('&timestamp=');
      if (start > -1) {
        url = url.substring(0, url.indexOf('&timestamp=')) + "&timestamp=" + currentTime_stamp;
      } else {
        url = url + "&timestamp=" + currentTime_stamp
    } else {
      url = url + "?timestamp=" + currentTime_stamp
    return url
window.history.pushState({}, 0, this.timeStamp(window.location.href));
最终经过这一番的操作下来，终于解决了。有人担心，每次刷新都会产生个临时文件，这样岂不是会占内存，其实完全可以不必担心，因为每次产生的临时文件都很小（和你代码有关），何况IE临时文件有限制文件大小的，默认是330M，满了后将不再增长。 
虽然这个办法不是完美的，如果码友们有更好的建议，希望能留言交流。 
最后一句：愿世界没有IE
                    首先要说的，IE浏览器简直是前端人的噩梦 ，每天一句辣鸡IE，下面我就把我大战IE三天的经历和大家一吐为快1 梦开始项目中要使用pdf预览功能，当时我想：这个我熟阿，pdf.js绝对是首选技术，因为它兼容IE9版本以上，Chrome等主流浏览器更是没问题。于是去pdf.js官网直接找到主流版本2.5.207下载下来，经过一把soul后，最终在Chrome浏览器和IE浏览器打开都能正常预览，心里想：这事到这就算结束了提一嘴：为什么说2.5.207是主流版本，因为该版本对IE的兼容性很好，不少文章都提到过
				该写法适用于pdf流文件加载，一般情况下不需要修改，如果一定要动，其他部分不用改，只需要修改viewer.js中第4355-4380行代码，，最后var defaultUrl = array;保证defaultUrl中得到值就行了。
最后网页端传入写法：一个viewer.html？file1=+流文件地址即可
				最近做了一个功能，需要上传下载、在线预览pdf文件，上传下载都好般，前后端以流的形式交互即可。那么在线预览呢？
通过iframe啥的，都可以实现，甚至谷歌火狐都自带插件，直接可以打开pdf，但是这些遇到强大的IE，统统都得熄火。
后来去网上看看别人怎么写的，发现一款强大的pdf插件，那就是pdfjs。
1、首先下载pdf插件：
pdf.js及其相关组建。
2、解压后文件放入相关目录下...
				pdf.js的元买已注释如下代码：
// if (origin !== viewerOrigin && protocol !== 'blob:') {
  //   throw new Error('file origin does not match viewer\'s');
主要原因为：https网站，加载了http的pdf资源文件地址，需要提供https的pdf资源文件地址。
				接手别的同事的Vue项目，下载好依赖，执行npm run dev运行的时候，出现问题，如下：
根据报错信息发现"pdfjs-dist"装的也有，项目中也有用到，版本是2.0.943：
此时，再次执行npm i pdfjs-dist@2.0.943，单独下载pdfjs-dist依赖，然后再执行npm run dev，发现项目OK~
举一反三，类似这样的报错信息，很大一部分情况都是由于单个依赖导致，可根据报错信息进行下载安装，进行解决。
				本pdfjs版本2.5.207，截至上传时间，当前的稳定版，官方的下载超级慢，好不容易下载了，分享出来。 
说明：里面有两套压缩包文件，分别是Prebuilt 和Prebuilt (ES5-compatible)，后者是对ES5做了兼容。
其中build目录是PDF.js的核心文件。 
web目录是PDF.js的配置与显示文件。 
viewer.html是负责显示PDF的，viewer.js是负责配置的文件。
					使用PDF.js预览文件老是报错Message: file origin does not match viewer‘s_otherError @ app.js:1140怎么办？？
                    undefinde+null: 
                    大神大神，我这边设置后是空白
brCode.code128(wx.createCanvasContext('Brcode'), this.prizeData.prizeCode, 100, 100
                uni-app使用websocket（封装、心跳检测）
                    adcold88: 
                    [code=javascript]
//获取消息抽离
getMessage(callback) {
		this.socketTask.onMessage((res) => {
			return callback(res)
this.$socket.getMessage(res=>{
				console.log(res);
[/code]