解决pdf.js下载PDF文件名称中文乱码和不带.pdf后缀名问题

解决pdf.js下载PDF文件名称中文乱码和不带.pdf后缀名问题

其实正儿八经的说，PDF文件名称这不算是一个乱码问题。

为什么这么说呢，因为我们看到的文件名称中杂乱无章的编码其实就是js把中文进行了编码而已，和真正的因为编码错误造成的乱码并不一样。

【心急的同学可以直接翻到最下面看：- 解决方法-】

我们看先错误出现的场景：

• 我使用pdf.js预览了一个叫做02010204_钢筋安装检验批质量验收记录_02010204016.pdf的文件，然后我点击pdf工具栏的下载时，给我生成的文件名是这样的：
  
• 我们从这个生成的名称中，可以看出，文件名称中非中文的字符都是正常的，中文的字符是不正常的，我们要解决的就是这个问题。

造成的原因：

• 网上的方法我也看了很多，比较常见的就是把我们要预览的地址先进行编码，使用JavaScript的encodeURIComponent()方法，还有在html中引入viewer.js 的script里指定charset="gb2312"。这些方法我都试了一下，结论是：不适用我这个情况。【其实就是加没加没啥变化】

• 不得已，翻了一下viewer.js关于下载这一部分的代码，还真让我发现了原因：
  

  在这里，viewer.js已经帮我们对文件名称进行了编码，所以我下载时生成的文件名就是编码过后的。

解决方法：

• 知道了原因，那解决方法就不难想了，对文件名进行解码，使用JavaScript的decodeURIComponent()方法。

• 找到viewer.js中的_download()方法
  
  把我红框框柱的代码替换成下面的代码即可：

  a.download = decodeURIComponent(filename);
  

最终效果：

• 至此，就搞定了，说了这么多其实就是换一行代码的事情，其实主要还是让大家了解一下寻找问题的过程，思想很重啊哟，哈哈。【附：效果图】。
  

---

在这里说一下.pdf后缀的问题：

有些时候我们下载pdf进入到上图(最终效果图)界面后会碰到文件名的后缀没有带 .pdf 的，这种情况下载下来的是pdf文件，但是没有后缀名，而且下载下来因为没有后缀名有时候没法直接打开，需要手动的加上.pdf后缀名。

要解决这个问题也很简单，还是从download的时候的文件名入手：

// 判断文件名是否以.pdf文件
if(decodeURIComponent(filename).endsWith('.pdf')){
  a.download = decodeURIComponent(filename);
} else {
  a.download = decodeURIComponent(filename) + '.pdf'
}

只需要判断一下，如果没有.pdf后缀，如果在下载还是没有，那么接着往下看：

到这里其实细心的同志已经发现了，这一段代码里有a.href a.target a.download，这就是赤裸裸的给a标签加属性的啊，既然是a标签，那我们还可以给指定一下MIME类型。

所以在判断文件是不是以.pdf结尾之前，我们还可以指定type：

a.type = "application/pdf";

到这里，你下载文件的时候，文件名的地方应该就会给你带上.pdf了，如果还不带.pdf后缀，那么请看一下：你的电脑是不是隐藏了文件的扩展名。

注意：我也不能保证此方法就一定可以解决你的问题。毕竟出现问题的情况千变万化。这里只是给大家提供一种方法尝试。