vue-pdf 预览乱码问题

Posted 2023-03-21

参考技术A

我遇到过以下两种情况的乱码，都是h5（我的项目是嵌入到钉钉内部的，具体网页版没有测试过）：
1、苹果手机正常显示；安卓手机只能显示部分汉字，字母数字都正常。
2、部分pdf文件苹果手机、安卓手机都不显示汉字，乱码。
(备注：这里提一下我的vue-pdf版本是4.1)

1、找到安装的依赖文件夹vue-pdf，把node_modules > vue-pdf > src > pdfjsWrapper.js替换为以下文件内容:

1、引入CMapReaderFactory.js（这个文件也在node_modules > vue-pdf > src下） 备注：不用关注，只是提一下

2、在执行 pdf.createLoadingTask 方法的时候加入 CMapReaderFactory ，（我的vue-pdf基本用法里有写） pdf的基本用法，点击这里

vue-pdf插件实现pdf上传预览下载预览打印下载

[vue-pdf] npm连接:https://www.npmjs.com/package/vue-pdf

安装vue-pdf

npm i vue-pdf

1.解决字体问题

　　将node_modules/pdfjs-dist/cmaps文件夹复制到public文件夹下 (找不到的可以看下代码怎么写的，node_modules/vue-pdf/src/CMapReaderFactory.js)

2.上传预览

<template>
  <div>
    <el-upload
      class="upload-demo" drag action="#" 
      :auto-upload="false"
      :on-change=\'fileChange\'
      :limit=\'1\'
      multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
    </el-upload>
    <pdf  :src="pdfURL"></pdf>
  </div>
</template>
<script>
import pdf from "vue-pdf";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      pdfURL: "",
    };
  },
  methods: {
    fileChange(file){
　　　 //拿到上传的文件
      let file=file.raw
　　　 //转成二进制
      let blob=new Blob([file])
　　　 //本地创建新的连接地址
      this.pdfURL=URL.createObjectURL(blob)
　　　 //解决字体问题、第二次加载字体不显示问题
      this.pdfURL= pdf.createLoadingTask({ 
      url: this.pdfURL , 
      cMapUrl: \'/cmaps/\',
      cMapPacked: true})
    }
  },
};
</script>

2. 下载预览

3.打印

4.下载

 

有空更新