vue-pdf打印乱码、方块字、无法打印

最新推荐文章于 2024-01-02 17:14:40 发布
最新推荐文章于 2024-01-02 17:14:40 发布
阅读量2k 收藏 8
点赞数 4
分类专栏： Vue2.x 文章标签： 乱码 vue.js xpdf js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RequesToGod/article/details/113938223
版权

vue-pdf出现打印乱码、方块字、无法打印

项目中需要用到vue-pdf组件来进行pdf的预览和打印，但使用vue-pdf打印图片没有问题，打印字体转码的PDF文件流会出现方块字。

在这里插入图片描述

各大社区找解决办法，有修改pdfjsWrapper.js源码的报错（loadingTask.then is not a function）、有使用 vue-print-nb组件的等等，各大坑都踩遍了，查百度把手都查出血了，没找到解决问题的办法。

最终解决问题的办法是使用iframe.conentwindow.print（）。

以下是关键部分的代码标注：

在这里插入图片描述

选中当前iframe打印：

    onPrint() {
      document.getElementById('printIframe').contentWindow.print();
    },

问题完美解决。
在这里插入图片描述

附上完整代码，供copy，包含pdf打印、分页、滚动页面pdf页码更新。

<template>
  <div class="contain">
    <div class="module">
      <div class="icon">
        <span></span>
      </div>
      <div class="detail">
        <div class="detail-left">
          <div class="title">
            <div class="titleIcon"></div>
            <p>{{ pdfTitle }}</p>
          </div>
          <div class="time">发布时间 {{ pdfTime | datetimeFormat }}</div>
          <div class="module-button">
            <el-button class="download" type="primary" @click="onDownload">
              下载
              <div class="titleIcon"></div>
            </el-button>
            <el-button class="download" type="primary" @click="onPrint">
              打印
              <div class="secondBtn"></div>
            </el-button>
          </div>
        </div>
        <div class="detail-right">
          <img :src="smallJpg" alt="" />
        </div>
      </div>
    </div>
    <div class="pdfBody">
      <div class="pdfHeader">
        <div class="pagination">
          <el-input v-model="input" placeholder="" size="mini " style="margin: 10px" @change="pageHander"></el-input>
          <div>/</div>
          <span>{{ numPages }}</span>
        </div>
      </div>
      <!-- 吸顶标题 -->
      <div v-show="isShow" class="scrollBox">
        <div class="scrollBox-left">
          <div class="titleIcon"></div>
          <p>{{ pdfTitle }}</p>
        </div>
        <div class="pagination">
          <el-input v-model="input" placeholder="" size="mini " style="margin: 10px" @change="pageHander"></el-input>
          <div>/</div>
          <span>{{ numPages }}</span>
        </div>
        <div class="scrollBox-right">
          <div class="downLoad" @click="onDownload"></div>
          <div class="print" @click="onPrint"></div>
        </div>
      </div>
      <div ref="printContent">
        <pdf v-for="i in numPages" :key="i" ref="pdfContent" :src="src" :page="i" style="display: inline-block; width: 100%"></pdf>
      </div>
      <iframe id="printIframe" :src="iframesrc" frameborder="0" style="display:none"></iframe>
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf';

export default {
  name: 'PdfViewer',
  components: { pdf },
  data() {
    return {
      input: 1,
      isShow: false,
      pageCount: 0,
      scrollDistance: 0,
      pdfTitle: this.$route.query.name,
      pdfTime: this.$route.query.time,
      smallJpg: this.$route.query.smallJpg,
      iframesrc: this.$route.query.src,
      src: pdf.createLoadingTask(this.$route.query.src),
      numPages: 0,
    };
  },
  created() {},
  mounted() {
    this.src.promise.then((pdf) => {
      this.numPages = pdf.numPages;
    });

    window.addEventListener('scroll', this.scrollHandler);
  },
  unmounted() {
    window.addEventListener('scroll', this.scrollHandler);
  },
  methods: {
    initData() {
      this.pdfTitle = this.$route.query.name;
      this.pdfTime = this.$route.query.time;
      this.smallJpg = this.$route.query.smallJpg;
    },
    pageHander() {
      if (this.input > this.numPages || this.input === Number(0)) {
        this.$message({
          showClose: true,
          message: '已超过文件页数！',
        });
      }
      const soloPdfHeight = this.$refs.printContent.offsetHeight / this.numPages;
      document.documentElement.scrollTop = this.input == 1 ? 0 : this.input * soloPdfHeight + 400;
    },
    scrollHandler() {
      this.scrollDistance = document.documentElement.scrollTop;
      const soloPdfHeight = this.$refs.printContent.offsetHeight / this.numPages;
      this.input = this.scrollDistance > 400 ? Math.ceil((this.scrollDistance - 400) / soloPdfHeight) : 1;
      console.log(this.input);
      if (this.scrollDistance > 335) {
        // 滚动条滚动距离超过100时
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
    onDownload() {
      this.$api.download(`file/downloadFile?fileId=${this.$route.query.id}`).then((res) => {});
    },
    onPrint() {
      document.getElementById('printIframe').contentWindow.print();
    },
  },
};
</script>
<style lang="scss" scoped>
// 吸顶
::v-deep.el-dialog__headerbtn {
  font-size: 12px;
}
::v-deep .el-input--mini .el-input__inner {
  color: #adb1b8;
  width: 28px;
  height: 28px;
  text-align: center;
  padding: 0px;
  background: #525a66;
  font-size: 14px;
}
.scrollBox {
  background: #363e47;
  border: 1px solid #313d4f;
  border-radius: 4px 4px 0 0;
  position: fixed;
  height: 40px;
  top: 70px;
  margin-right: 30px;
  z-index: 1000000000;
  display: flex;
  align-items: center;
  width: 84.8%;
  .pagination {
    display: flex;
    position: absolute;
    left: 50%;
    color: #adb1b8;
    align-items: center;
    justify-content: space-around;
    width: 70px;
    div {
      text-align: center;
      margin-right: 6px;
    }
    span {
    }
  }
  .scrollBox-right {
    position: absolute;
    right: 60px;
    display: flex;
    width: 60px;
    justify-content: space-between;
    .print {
      width: 18px;
      height: 22px;
      cursor: pointer;
      background: url('~@/assets/icons/dayin.svg') no-repeat;
      background-size: 100%;
    }
    .downLoad {
      width: 18px;
      height: 22px;
      line-height: 22px;
      cursor: pointer;
      background: url('~@/assets/icons/xiazai2.svg') no-repeat;
      background-size: 100%;
    }
  }
  .scrollBox-left {
    display: flex;
    align-items: center;
    justify-content: center;
    p {
      width: 400px;
      margin: 30px;
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #ffffff;
      letter-spacing: 0.39px;
      line-height: 18px;
    }
    .titleIcon {
      margin-left: 32px;
      width: 18px;
      height: 22px;
      cursor: pointer;
      background: url('~@/assets/icons/wendang1.svg') no-repeat;
      background-size: 100%;
    }
  }
}
.contain {
  width: 100%;
  height: 100%;
  .module {
    padding: 25px 0px;
    margin-bottom: 37px;
    .detail {
      padding: 22px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 120px;
      width: 100%;
      .detail-right {
        width: 100px;
        height: 140px;
        margin-right: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .detail-left {
        //font-family: PingFangSC-Semibold;
        font-weight: bold;
        font-size: 20px;
        color: #ffffff;
        .module-button {
          margin-top: 20px;
          display: flex;
          .download {
            height: 28px;
            width: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            .titleIcon {
              width: 16px;
              height: 14px;
              position: absolute;
              right: 8px;
              top: 6px;
              cursor: pointer;
              background: url('~@/assets/icons/xiazai2.svg') no-repeat;
              background-size: 100%;
            }
            .secondBtn {
              width: 16px;
              height: 14px;
              position: absolute;
              right: 8px;
              top: 6px;
              cursor: pointer;
              background: url('~@/assets/icons/dayin.svg') no-repeat;
              background-size: 100%;
            }
          }
        }
        .time {
          opacity: 0.7;
          font-family: PingFangSC-Semibold;
          font-size: 14px;
          color: #ffffff;
          height: 18px;
          letter-spacing: 0.39px;
          line-height: 18px;
        }
        .title {
          display: flex;
          justify-content: space-between;
          .titleIcon {
            width: 32px;
            height: 38px;
            margin-right: 10px;
            cursor: pointer;
            background: url('~@/assets/icons/wendang1.svg') no-repeat;
            background-size: 100%;
          }
        }
      }
    }
    .icon {
      border-bottom: 1px solid rgba(61, 61, 61, 0.4);
      height: 28px;
      margin-bottom: 10px;
      position: relative;
      top: -12px;
      span {
        opacity: 0.7;
        font-family: PingFangSC-Semibold;
        font-size: 14px;

        padding: 0px 10px 12px 30px;
        color: #ffffff;
        letter-spacing: 2px;
        line-height: 18px;
      }
    }
  }

  .pdfBody {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    .pdfHeader {
      background: #363e47;
      border: 1px solid #313d4f;
      border-radius: 8px 8px 0 0;
      position: relative;
      height: 40px;
      top: 0px;
      z-index: 10;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .pagination {
        display: flex;
        color: #adb1b8;
        align-items: center;
        justify-content: space-around;
        width: 70px;
        div {
          text-align: center;
          margin-right: 6px;
        }
        span {
        }
      }
    }
  }
}
</style>
Boriska1996
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue中使用vue-pdf的方法详解
01-19
需求：简单说~~有两个pdf文件需在h5上展示，通过点击按钮切换不同文件的显示 注： 1.vue-pdf默认展示首页，我这里的需求是通过滑动展示所有页面，这里使用的v-for遍历。有多少页就加载了多少个pdf组件。 2.pdf文件存在跨域问题，这个需要后端同学支持。 3.demo上的pdf文件只有一页，测试多页展示，自己改用多页pdf文件即可 <!-- src:pdf地址，page: 当前显示页 --> <pdf v-for=i in numPages :k
vue 使用 vue-pdf 实现pdf在线预览的示例代码
11-21
背景 之前的demo增加了图片预览，于是今天下午追完番剧就突然想到能不能把pdf在线预览也做了，说干就干，刚开始查了很多教程，我发现很多人都在说什么pdf.js这个库，这当然没什么问题，pdf.js的确可以非常完美的实现pdf在线预览的过程，但是感觉这样直接进去有点不太优雅，于是找找看看有没有什么现成的组件，发现有vue-pdf这个组件，虽然说它没有原生那样强大，比如不支持pdf文字复制，打印会乱码，但是我感觉已经足以满足我的需求了。本篇笔记循序渐进，从基础的demo，到一个可用的程度，文末列出了大家在实际使用的过程中可能会遇到的问题和解决方案。 安装： 这个没有啥背景知识可讲，我们直接跳
vue-pdf打印实现和乱码解决
05-30
简单方便，有具体操作说明文档和完整源码,含： 1.打印页面demo，pdf.vue，作为vue项目组件使用，样式美观大方，简单方便； 2.pdfjsWrapper.js，核心源码，直接替换就行； 3.pdf打印乱码解决方案使用说明.doc，手把手教你快速使用。
vue-pdf-sign:vue-pdf 增加支持显示签名
05-17
vue-pdf-符号 vue.js pdf查看器 安装 npm install --save vue-pdf-sign 2020-07-10 npm 重新打包!!支持显示签章 by 张总监 朱总监 示例-基本 < template> < pdf xss=removed></ pdf> </ template> < script > import pdf from ' vue-pdf ' export default { components : { pdf } } 演示版 待定：修复演示 浏览器支持 与相同的浏览器支持 笔记 从v2.x开始，该脚本将导出为esm。 原料药 道具 ：src字符串/对象-默认值：'' pdf文件的网址。 src也可以是string|TypedArray|DocumentInitPar
vue----解决使用vue-pdf进行文件打印预览时出现小方块乱码
最新发布
heavenz19的博客
01-02 629
【代码】vue----解决使用vue-pdf进行文件打印预览时出现小方块乱码。
vue-pdf打印出现方字块乱码问题
H-rosy的博客
08-06 2693
今天分享vue-pdf预览显示没有问题，但是打印时出现乱码问题。话不多说先上乱码图。今天主要是分享给大家两种方法。亲测有效!!!!!!!!乱码问题是因为我们安装vue-pdf的版本问题，它的这个源码因为版本更新已经改变了，下面这个地址详细的介绍了源码的改变。红色区域的'-'号表明是已经删除了的，绿色区域的加号是新加的。上一页然后在你绑定的打印按钮的方法中直接使用。......
vue前端预览pdf并加水印、ofd文件，控制打印、下载、另存，vue-pdf的使用方法以及在开发中所踩过的坑合集
热门推荐
zhangzuying的博客
06-21 1万+
根据公司的实际项目需求，要求实现对pdf和ofd文件的预览，并且需要限制用户是否可以下载、打印、另存pdf、ofd文件，如果该用户可以打印、下载需要控制每个用户的下载次数以及可打印的次数。正常的预览pdf很简单，直接调用浏览器的预览就可以而且功能也比较全，但是一涉及到禁止用户打印、另存的话就不可以用浏览器自带的预览方式了。那就只能寻找插件来模拟了，之前在eletron-vue项目中使用过pdfjs以及vue-pdf插件，效果不是特别好
解决vue中使用pdf.js出现框无内容的问题
qq_42874794的博客
01-23 8515
因项目中要实现pdf预览，查找了一圈最终决定使用pdf.js这一插件。 这里主要是说一下我在使用时遇到的比较坑的bug 参考博文：https://blog.csdn.net/Corey_mengxiaodong/article/details/81079135 感谢这篇文章的大佬写的很详细。但是当我把demo运用在我的vue项目中时，却不显示pdf只出现一个白色的框，框里并没有内容。开始找了很多的...
利用vue-pdf打印以及乱码优化问题
qq_69892545的博客
12-21 606
1.下载 (可参考vue-pdf官网)2.建立pdf.vue组件。
Vue——printjs打印el-table,echarts等打印不全，异常解决
小欣儿的专栏
03-31 8532
这条同样可以解决echarts不能打印问题，算是万能之法了吧，相对前面几种方式赶紧这个方法最简单，打印效果也比较理想。
解决vue-pdf查看pdf文件及打印乱码的问题
01-18
vue中简单使用vue-pdf预览pdf文件，解决打印预览乱码问题 vue-pdf 使用 安装 npm install –save vue-pdf 引入 import pdf from “vue-pdf 自定义封装pdf预览组件 close-on-click-modal=false show-close=...
vue img src 动态赋值_解决vue-pdf查看pdf文件及打印乱码的问题_vue.js
weixin_39689347的博客
11-04 689
前言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" :s...
Vue PDFDocumentLoadingTask.then method use the`promise`getter instead 报错解决
qq_37890733的博客
02-21 1298
Vue PDFDocumentLoadingTask.then method use thepromisegetter instead 报错解决 之前pdfjs-dist使用的是2.4版本，替换为2.3.200可解决问题 npm uninstall pdfjs-dist npm install [email protected]
Vue PDF文件预览打印vue-pdf
s_156的博客
10-17 3218
Vue PDF文件预览打印vue-pdf
vue-pdf的使用与遇到的坑
m0_46114541的博客
05-25 2952
项目需求使用在页面中为用户呈现pdf文件内容，但不能让用户随意下载，最后最后找到了vue-pdf。报错MainTemplate.hooks.hotBootstrap has been removed (use your own RuntimeModule instead)
vue-pdf 中文乱码更改后只有第一次起作用
qq_42749712的博客
09-17 204
我是首先pdfjsWrapper.js替换，还不起作用，后续又改的怕对方。create LoadingTask pdf.createLoadingTask({ url: this.path,//你的pdf地址 CMapReaderFactory }) 还是不行最后去的git看的是思路清空缓存 具体方法：在前一个组件 beforeDestroy() { window.location.reload() }, ...
vue-pdf使用+分页预览(踩坑 + 使用本地字体库)
小love容儿的博客
05-18 2026
项目场景： 最近项目要文件流做查询报表pdf预览并下载打印的需求，网上很多关于vue-pdf的使用，使用上没有太多难度； 使用方法 npm install --save vue-pdf <el-dialog title="预览报表" :visible.sync="ptVisible" width="80%" :before-close="handleClose"> <pdf ref="pdf" v-for="i in numPages" :key="i...
vue print 解决针式打印机打印失败不清晰的问题
weixin_43866627的博客
12-23 1294
vue print 解决针式打印机打印失败不清晰的问题
vue-pdf的使用方法及解决在线打印预览乱码
10年职场两茫茫，35岁凄凉奈若何
02-28 404
vue-pdf的使用方法及解决在线打印预览乱码
vue-pdf 进行打印pdf
09-07
你可以使用 vue-pdf 来在 Vue.js 应用中打印 PDF。下面是一些步骤供您参考： 1. 首先，确保您的应用中已经安装了 vue-pdf。您可以使用 npm 或 yarn 进行安装： ```bash npm install vue-pdf ``` 或者 ```bash yarn add vue-pdf ``` 2. 在您的 Vue 组件中，导入并注册 vue-pdf 组件： ```javascript import pdf from 'vue-pdf'; export default { components: { pdf }, // ... } ``` 3. 在模板中使用 vue-pdf 组件，并设置其 src 属性来指定要打印的 PDF 文件的路径或数据： ```html <template> <div> <pdf :src="pdfUrl"></pdf> <button @click="printPdf">打印PDF</button> </div> </template> ``` 4. 在 Vue 组件中，定义一个方法来触发打印操作： ```javascript methods: { printPdf() { // 使用 JavaScript 的 window.print() 方法来触发打印操作 window.print(); } } ``` 5. 确保您在浏览器中正确引入了 Vue.js 和 vue-pdf 的依赖。然后，当您点击 "打印PDF" 的按钮时，应该会触发打印操作并显示打印预览界面。 请注意，此方法依赖于浏览器的打印功能。因此，打印效果可能会因浏览器和操作系统的差异而有所不同。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值