这篇文章给大家介绍了“VUE项目中如何实现查看pdf文件，乱码情况怎么办”的相关知识，讲解详细，步骤过程清晰，有一定的借鉴学习价值，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

前言

vue中简单使用vue-pdf预览pdf文件，解决打印预览乱码问题

vue-pdf 使用

安装

npm install --save vue-pdf

引入

import pdf from "vue-pdf

自定义封装pdf预览组件

<template>
 <el-dialog
  :visible.sync="pdfDialog"
  :close-on-click-modal="false"
  :show-close="false"
  width="900px"
  top="52px"
 >
  <div class="pdf" v-show="fileType == 'pdf'">
   <p class="arrow">
    <!-- 上一页 -->
    <span
     @click="changePdfPage(0)"
     class="currentPage"
     :class="{ grey: currentPage == 1 }"
     >上一页&nbsp;&nbsp;</span
    >
    <span style="color: #8c8e92;">{{ currentPage }} / {{ pageCount }}</span>
    <!-- 下一页 -->
    <span
     @click="changePdfPage(1)"
     class="currentPage"
     :class="{ grey: currentPage == pageCount }"
     >&nbsp;&nbsp;下一页</span
    >&nbsp;&nbsp;&nbsp;&nbsp;<button @click="$refs.pdf.print()">下载</button>

    <span
     style="float :right;padding-right:40px;font-size: 20px;color: #8c8e92;cursor: pointer;"
     @click="close"
     ><i class="el-icon-close"></i
    ></span>
   </p>
   <!-- loadPdfHandler：加载事件 src：需要展示的PDF地址；currentPage：当前展示的PDF页码；pageCount=$event：PDF文件总页码；currentPage=$event：一开始加载的页面-->
   <pdf
     ref="pdf"
    :src="src"
    :page="currentPage"
    @num-pages="pageCount = $event"
    @page-loaded="currentPage = $event"
    @loaded="loadPdfHandler"
   ></pdf>
  </div>
 </el-dialog>
</template>

<script>
import pdf from "vue-pdf";
export default {
 components: { pdf },
 props: ["src"],
 data() {
  return {
   filesProps: {
    label: "originName"
   },
   pdfDialog: false,
   currentPage: 0, // pdf文件页码
   pageCount: 0, // pdf文件总页数
   fileType: "pdf" // 文件类型
  };
 },
 methods: {
  // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
  changePdfPage(val) {
   if (val === 0 && this.currentPage > 1) {
    this.currentPage--;
   }
   if (val === 1 && this.currentPage < this.pageCount) {
    this.currentPage++;
   }
  },
  // pdf加载时
  loadPdfHandler() {
   this.currentPage = 1; // 加载的时候先加载第一页
  },
  handleOpen() {
   this.pdfDialog = true;
  },
  //关闭弹框
  close() {
   this.pdfDialog = false;
  }
 }
};
</script>

<style lang="stylus">
.currentPage {
  cursor: pointer;
  color: #8c8e92;
}

.currentPage:hover {
  color: #2761ff;
}
.arrow{
  position: fixed;
  top: 0px;
  left :0px;
  z-index: 2;
  width: 100%;
  background-color: #191919;
  padding: 12px 0;
  margin: 0;
  text-align :center;
}
>>>.el-dialog__body {
  color: #606266;
  font-size: 14px;
  padding:0;
}
</style>

使用

<template>
 <el-container>
  <el-header>
   <el-card>
    <div>
     <el-button
      style="font-style:oblique;font-size: 18px;"
      @click="handlePreviewFile"
      >PDF 预览</el-button
     >
     <el-button
      style="float: right;line-height: 40px;padding: 3px;"
      type="text"
      @click="handleSafetyExperience"
      ><i class="el-icon-caret-left">返回</i></el-button
     >
    </div>
   </el-card>
  </el-header>
  <el-main>
   <el-card class="card-style">
    <pdf-preview ref="pdfSearch" :src="src"></pdf-preview>
   </el-card>
  </el-main>
 </el-container>
</template>

<script>
import PdfPreview from "../widget/PdfPreview";
export default {
 name: "InfoExperience",
 components: {
  PdfPreview
 },
 data() {
  return {
   src:
    "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf"
  };
 },
 created() {},
 methods: {
  handlePreviewFile() {
   this.$refs.pdfSearch.handleOpen();
  },
  handleSafetyExperience() {
   this.$router.push({ path: "/safetyApp/sharedExperience" });
  }
 }
};
</script>

<style scoped></style>

预览效果

点击下载打印预览

预览出现乱码

pdf打印乱码解决办法

打开vue-pdf插件目录node_modules/vue-pdf/src/pdfjsWrapper.js

解决办法

详见Github上提供解决办法 Fix fonts issue in printing #130

乱码解决，打印预览正常

修改后pdfjsWrapper.js源码

以下为本人修改的pdfjsWrapper.js文件，亲测解决乱码问题

import { PDFLinkService } from 'pdfjs-dist/lib/web/pdf_link_service';

export default function(PDFJS) {

 function isPDFDocumentLoadingTask(obj) {

 return typeof(obj) === 'object' && obj !== null && obj.__PDFDocumentLoadingTask === true;
 }

 function createLoadingTask(src, options) {

 var source;
 if ( typeof(src) === 'string' )
  source = { url: src };
 else if ( src instanceof Uint8Array )
  source = { data: src };
 else if ( typeof(src) === 'object' && src !== null )
  source = Object.assign({}, src);
 else
  throw new TypeError('invalid src type');

 var loadingTask = PDFJS.getDocument(source);
 loadingTask.__PDFDocumentLoadingTask = true; // since PDFDocumentLoadingTask is not public

 if ( options && options.onPassword )
  loadingTask.onPassword = options.onPassword;

 if ( options && options.onProgress )
  loadingTask.onProgress = options.onProgress;

 return loadingTask;
 }


 function PDFJSWrapper(canvasElt, annotationLayerElt, emitEvent) {

 var pdfDoc = null;
 var pdfPage = null;
 var pdfRender = null;
 var canceling = false;

 canvasElt.getContext('2d').save();

 function clearCanvas() {

  canvasElt.getContext('2d').clearRect(0, 0, canvasElt.width, canvasElt.height);
 }

 function clearAnnotations() {

  while ( annotationLayerElt.firstChild )
  annotationLayerElt.removeChild(annotationLayerElt.firstChild);
 }

 this.destroy = function() {

  if ( pdfDoc === null )
  return;
  pdfDoc.destroy();
  pdfDoc = null;
 }

 this.getResolutionScale = function() {

  return canvasElt.offsetWidth / canvasElt.width;
 }

 this.printPage = function(dpi, pageNumberOnly) {

  if ( pdfPage === null )
  return;

  // 1in == 72pt
  // 1in == 96px
  var PRINT_RESOLUTION = dpi === undefined ? 150 : dpi;
  var PRINT_UNITS = PRINT_RESOLUTION / 72.0;
  var CSS_UNITS = 96.0 / 72.0;

  // var iframeElt = document.createElement('iframe');
  var printContainerElement = document.createElement('div');
  printContainerElement.setAttribute('id', 'print-container')

  // function removeIframe() {
  //
  // iframeElt.parentNode.removeChild(iframeElt);
  function removePrintContainer() {
  printContainerElement.parentNode.removeChild(printContainerElement);

  }

  new Promise(function(resolve, reject) {

  // iframeElt.frameBorder = '0';
  // iframeElt.scrolling = 'no';
  // iframeElt.width = '0px;'
  // iframeElt.height = '0px;'
  // iframeElt.style.cssText = 'position: absolute; top: 0; left: 0';
  //
  // iframeElt.onload = function() {
  //
  // resolve(this.contentWindow);
  // }
  //
  // window.document.body.appendChild(iframeElt);
  printContainerElement.frameBorder = '0';
  printContainerElement.scrolling = 'no';
  printContainerElement.width = '0px;'
  printContainerElement.height = '0px;'
  printContainerElement.style.cssText = 'position: absolute; top: 0; left: 0';

  window.document.body.appendChild(printContainerElement);
  resolve(window)
  })
  .then(function(win) {

  win.document.title = '';

  return pdfDoc.getPage(1)
  .then(function(page) {

   var viewport = page.getViewport(1);
   // win.document.head.appendChild(win.document.createElement('style')).textContent =
   printContainerElement.appendChild(win.document.createElement('style')).textContent =
   '@supports ((size:A4) and (size:1pt 1pt)) {' +
    '@page { margin: 1pt; size: ' + ((viewport.width * PRINT_UNITS) / CSS_UNITS) + 'pt ' + ((viewport.height * PRINT_UNITS) / CSS_UNITS) + 'pt; }' +
   '}' +

   '#print-canvas { display: none }' +

   '@media print {' +
    'body { margin: 0 }' +
    'canvas { page-break-before: avoid; page-break-after: always; page-break-inside: avoid }' +
   '#print-canvas { page-break-before: avoid; page-break-after: always; page-break-inside: avoid; display: block }' +
   'body > *:not(#print-container) { display: none; }' +
   '}'+

   '@media screen {' +
    'body { margin: 0 }' +
   // '}'+
   //
   // ''
   '}'
   return win;
  })
  })
  .then(function(win) {

  var allPages = [];

  for ( var pageNumber = 1; pageNumber <= pdfDoc.numPages; ++pageNumber ) {

   if ( pageNumberOnly !== undefined && pageNumberOnly.indexOf(pageNumber) === -1 )
   continue;

   allPages.push(
   pdfDoc.getPage(pageNumber)
   .then(function(page) {

    var viewport = page.getViewport(1);

    // var printCanvasElt = win.document.body.appendChild(win.document.createElement('canvas'));
    var printCanvasElt = printContainerElement.appendChild(win.document.createElement('canvas'));
    printCanvasElt.setAttribute('id', 'print-canvas')

    printCanvasElt.width = (viewport.width * PRINT_UNITS);
    printCanvasElt.height = (viewport.height * PRINT_UNITS);

    return page.render({
    canvasContext: printCanvasElt.getContext('2d'),
    transform: [ // Additional transform, applied just before viewport transform.
     PRINT_UNITS, 0, 0,
     PRINT_UNITS, 0, 0
    ],
    viewport: viewport,
    intent: 'print'
    }).promise;
   })
   );
  }

  Promise.all(allPages)
  .then(function() {

   win.focus(); // Required for IE
   if (win.document.queryCommandSupported('print')) {
   win.document.execCommand('print', false, null);
   } else {
   win.print();
    }
   // removeIframe();
   removePrintContainer();
  })
  .catch(function(err) {

   // removeIframe();
   removePrintContainer();
   emitEvent('error', err);
  })
  })
 }

 this.renderPage = function(rotate) {
  if ( pdfRender !== null ) {

  if ( canceling )
   return;
  canceling = true;
  pdfRender.cancel();
  return;
  }

  if ( pdfPage === null )
  return;

  if ( rotate === undefined )
  rotate = pdfPage.rotate;

  var scale = canvasElt.offsetWidth / pdfPage.getViewport(1).width * (window.devicePixelRatio || 1);
  var viewport = pdfPage.getViewport(scale, rotate);

  emitEvent('page-size', viewport.width, viewport.height);

  canvasElt.width = viewport.width;
  canvasElt.height = viewport.height;

  pdfRender = pdfPage.render({
  canvasContext: canvasElt.getContext('2d'),
  viewport: viewport
  });

  annotationLayerElt.style.visibility = 'hidden';
  clearAnnotations();

  var viewer = {
  scrollPageIntoView: function(params) {
   emitEvent('link-clicked', params.pageNumber)
  },
  };

  var linkService = new PDFLinkService();
  linkService.setDocument(pdfDoc);
  linkService.setViewer(viewer);

  pdfPage.getAnnotations({ intent: 'display' })
  .then(function(annotations) {

  PDFJS.AnnotationLayer.render({
   viewport: viewport.clone({ dontFlip: true }),
   div: annotationLayerElt,
   annotations: annotations,
   page: pdfPage,
   linkService: linkService,
   renderInteractiveForms: false
  });
  });

  pdfRender
  .then(function() {
  annotationLayerElt.style.visibility = '';
  canceling = false;
  pdfRender = null;
  })
  .catch(function(err) {

  pdfRender = null;
  if ( err instanceof PDFJS.RenderingCancelledException ) {

   canceling = false;
   this.renderPage(rotate);
   return;
  }
  emitEvent('error', err);
  }.bind(this))
 }


 this.forEachPage = function(pageCallback) {

  var numPages = pdfDoc.numPages;

  (function next(pageNum) {

  pdfDoc.getPage(pageNum)
  .then(pageCallback)
  .then(function() {

   if ( ++pageNum <= numPages )
   next(pageNum);
  })
  })(1);
 }


 this.loadPage = function(pageNumber, rotate) {

  pdfPage = null;

  if ( pdfDoc === null )
  return;

  pdfDoc.getPage(pageNumber)
  .then(function(page) {

  pdfPage = page;
  this.renderPage(rotate);
  emitEvent('page-loaded', page.pageNumber);
  }.bind(this))
  .catch(function(err) {

  clearCanvas();
  clearAnnotations();
  emitEvent('error', err);
  });
 }

 this.loadDocument = function(src) {

  pdfDoc = null;
  pdfPage = null;

  emitEvent('num-pages', undefined);

  if ( !src ) {

  canvasElt.removeAttribute('width');
  canvasElt.removeAttribute('height');
  clearAnnotations();
  return;
  }

  if ( isPDFDocumentLoadingTask(src) ) {

  if ( src.destroyed ) {

   emitEvent('error', new Error('loadingTask has been destroyed'));
   return
  }

  var loadingTask = src;
  } else {

  var loadingTask = createLoadingTask(src, {
   onPassword: function(updatePassword, reason) {

   var reasonStr;
   switch (reason) {
    case PDFJS.PasswordResponses.NEED_PASSWORD:
    reasonStr = 'NEED_PASSWORD';
    break;
    case PDFJS.PasswordResponses.INCORRECT_PASSWORD:
    reasonStr = 'INCORRECT_PASSWORD';
    break;
   }
   emitEvent('password', updatePassword, reasonStr);
   },
   onProgress: function(status) {

   var ratio = status.loaded / status.total;
   emitEvent('progress', Math.min(ratio, 1));
   }
  });
  }

  loadingTask
  .then(function(pdf) {

  pdfDoc = pdf;
  emitEvent('num-pages', pdf.numPages);
  emitEvent('loaded');
  })
  .catch(function(err) {

  clearCanvas();
  clearAnnotations();
  emitEvent('error', err);
  })
 }

 annotationLayerElt.style.transformOrigin = '0 0';
 }

 return {
 createLoadingTask: createLoadingTask,
 PDFJSWrapper: PDFJSWrapper,
 }
}

补充知识：vueshowpdf插件预览中文pdf出现乱码问题+pdf.js加载bcmap文件404报错

vue项目中使用到pdf在线预览，使用了vueshowpdf，测试pdf是好好的，但是当上传到服务器出现预览的pdf乱码问题，很是纠结，网上找了好多资料没有，于是找找pdf相关的pdf预览乱码（中文乱码）问题解决方案。

之前也试过pdf.js插件本地测试，当去掉cmaps文件夹之后PDF会乱码，添加之后又好了。查看.bcmap文件原来时候字体有关系的，于是估计就是字体问题。

解决方法：

1、下载pdf.js插件，复制cmaps文件夹放到vue项目中，我放在static文件夹下面

2、在对应使用到vueshowpdf插件中添加代码

***
PDFJS.cMapUrl = '../../static/cmaps/';
PDFJS.cMapPacked = true;
***
PDFJS.cMapUrl = '../../static/cmaps/';//这里面是相对路径

然后神奇的效果就是成功啦，不再乱码了。

注意：

可能您的页面在服务器端还会出现乱码，中文不识别，不要怕，我找到了问题所在，IIS的MIME问题（然后找到网上一篇文章，证实了我是的想法）

新增：2018-11-16

我们会发现

我的bcmp文件已经放到了对应目录了，配置也对了，怎么还是404

其实这个是iis的MIME文件设置

新增.bcmap文件 配置值 .bcmap -> image/svg+xml

我遇到的问题是.net项目，所以或者在Web.config添加如下代码

<system.webServer>
  <staticContent>
   <mimeMap fileExtension=".bcmap" mimeType="image/svg+xml" />
  </staticContent>
 </system.webServer>

现在重新运行下应该是可以了，如果还不行的话，暂时就不知道是什么原因引起的了

作为一个前端，难为我了！

“VUE项目中如何实现查看pdf文件，乱码情况怎么办”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注群英网络网站，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• canvas中物体的框选功能怎样实现，代码是什么

  目录前言框选的实现Group 类的实现小结前言虽然这两个月基金涨的还行，但是离回本还有一大大大段距离????。今天呢，我们要实现的是 canvas 中物体的框选功能，大概就像下面这个样子：然后话不多说，直接开撸 ✍????框选的实现先来说下拖蓝选区（鼠标拖拽区域）的实现方式吧，仔细观察你会发现选区其实就是个普通矩形，这个区域由鼠标

• vue实现坐标拾取器的方法是什么

  这篇文章主要介绍了详解vue实现坐标拾取器功能示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• Promise.all是什么，如何手动实现Promise.all

  目录前言何为Promise.all？原生 Promise.all 测试手动实现Promise.all测试案例Promise.race原生 Promise.race 测试手写Promise.race测试案例Promise.any原生 Promise.any 测试手写Promise.any测试案例Promise.allSe

• vue项目中css相对路径导入要注意哪些

  目录前提先附上成功的配置1.build/utils.js2.build/webpack.base.conf.js遇到的坑1.错误写法2.正确的写法3.如果想在“style”里面用上~@表示的相对路径前提npm install style-loader --save-devnpm install css-loader -

• 小程序canvas实现一个渐变的环形的代码是什么

  微信小程序canvas实现环形渐变 本文实例为大家分享了微信小程序canvas实现环形渐变的具体代码,供大家参考,具体内容如下 这个例子是在微信小程序中写的 效果图 后端返回的数据格式,需要的只有otherInfo里面的数据 wxml <view>     <canvas class="progress_bg" canvas-id="{{otherInfo.bgid}}"> </canvas>     <canvas class="prog ...