vue img src 动态赋值_解决vue-pdf查看pdf文件及打印乱码的问题_vue.js

最新推荐文章于 2024-07-24 10:48:06 发布

weixin_39689347

最新推荐文章于 2024-07-24 10:48:06 发布

阅读量731

点赞数

本文介绍了在vue项目中使用vue-pdf预览PDF文件时遇到的乱码问题及其解决方案。通过修改vue-pdf插件源码和配置IIS MIME类型，成功解决了预览和打印PDF时的中文乱码问题。

摘要由CSDN通过智能技术生成

前言

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

vue-pdf 使用

安装

npm install --save vue-pdf

引入

import pdf from "vue-pdf

自定义封装pdf预览组件


<template>
 <el-dialog
  :"pdfDialog"
  :close-on-click-modal="false"
  :show-close="false"
  
  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="$()">下载</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) {
    
   }
   if (val === 1 && this.currentPage < this.pageCount) {
    
   }
  },
  // 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;
  w