（debug）vue-pdf预览时公式里的英文乱码

最新推荐文章于 2022-12-21 22:01:31 发布
最新推荐文章于 2022-12-21 22:01:31 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： 记录debug过程 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDN_001VIP/article/details/124017652
版权

项目场景：

项目需要在网页里打开数学试卷预览，我先将试卷的word文档转换成pdf，再在vue中使用vue-pdf对pdf格式的试卷进行预览。

问题描述

在网页中打开pdf之后，发现很多英文变成了菱形问号乱码。

原因分析：

  • 怀疑是vue-pdf的问题
  • 网上搜了很久vue-pdf乱码的解决方法，没有用，也没有我这种情况，网上的都是中文会乱码
  • 改变方向不搜vue-pdf，转而搜索英文乱码的关键词
  • 发现可能是对字母的解码有问题，或者无法识别特殊字体的字母
  • 仔细观察发现选项里的字母正常显示，公式里的乱码
    预览截图
  • 打开word查看两种英文的字体，将公式里的字体改成和选项里一样的
  • 公式的字体就是不变，网页里预览仍然乱码
  • AOD三个字母放到公式外面手打，不会乱码，仔细看发现公式外和里的字母字体是不一样的
  • 看来是不能识别公式里字母的字体

解决方案：

暂时还不知道怎么能让vue-pdfs识别更多的字体，只好将word里公式里的字母放到公式外面，可以正常预览

CSDN_001VIP
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-pdf预览分页版
06-02
pdf预览
解决vue-pdf查看pdf文件及打印乱码的问题
01-18
前言 vue中简单使用vue-pdf预览pdf文件，解决打印预览乱码问题 vue-pdf 使用 安装 npm install –save vue-pdf 引入 import pdf from “vue-pdf 自定义封装pdf预览组件 <template> <el visible.sync=pdfDialog close-on-click-modal=false show-close=false width=900px top=52px > <div class=pdf v-show=fileType == '
Vue+ElementUI使用vue-pdf实现预览功能
10-15
主要为大家详细介绍了Vue+ElementUI使用vue-pdf实现预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue-pdf预览pdf文件流
01-13
在vue中引入vue-pdf插件预览pdf文件流
vue-pdf打印出现方字块乱码问题
H-rosy的博客
08-06 2729
今天分享vue-pdf预览显示没有问题，但是打印时出现乱码问题。话不多说先上乱码图。今天主要是分享给大家两种方法。亲测有效!!!!!!!!乱码问题是因为我们安装vue-pdf的版本问题，它的这个源码因为版本更新已经改变了，下面这个地址详细的介绍了源码的改变。红色区域的'-'号表明是已经删除了的，绿色区域的加号是新加的。上一页然后在你绑定的打印按钮的方法中直接使用。......
利用vue-pdf打印以及乱码优化问题
qq_69892545的博客
12-21 615
1.下载 (可参考vue-pdf官网)2.建立pdf.vue组件。
vue-pdf解决显示无法显示中文、中文打印预览乱码
細水、長流√的专栏
02-22 4491
vue-pdf解决显示中文乱码和打印预览乱码 1.正常的vue-pdf使用 1.1 安装vue-pdf cnpm install vue-pdf --save-dev 1.2 简单使用 <template> <pdf src="./123.pdf"></pdf> </template> <script> import pdf from 'vue-pdf' export default { components: {
vue-pdf 字体不显示
weixin_41894177的博客
01-29 2338
vue-pdf 预览时添加的水印不显示，但是在iframe中可以正常显示，排除pdf文件生成时的问题 。推测是预览显示时没有相关字体导致。 亲测以下解决办法有效： 下面展示一些 `内联代码片`。 import pdf from 'vue-pdf' import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js' // 有时PDF文件地址会出现跨域的情况,这里最好处理一下 this.src = pdf.createLoad.
vue-pdf预览乱码问题、打印乱码多一页空白问题
Fansr_的博客
05-12 2734
一、解决乱码问题参考；https://github.com/FranckFreiburger/vue-pdf/pull/130/commits/253f6186ff0676abf9277786087dda8d95dd8ea7 将github上红色背景代码删除、绿色背景代码替换上； 二、解决多一页空白问题； 找到pdfjsWrapper.js文件上面替换注释的代码即可 '@supports ((size:A4) and (size:1pt 1pt)) {' + ...
vue 上传,下载,预览文件及预览TXT时乱码处理
Jerry子辰的博客
09-07 4591
1.上传文件 /*这里顺便写一下再vue中获取input里选择的文件，具体的input属性可去官网查看*/ <input class="import-input" type="file" accept=".xls, .xlsx" ref="importInput" @change="fileChange(e)"/> /*这里只写methods里的方法*/ fileChange (e) { // 如果需要验证逻辑，自行添加，比如只支持txt后缀名的文件,e.target等于t
vue 使用 vue-pdf 实现pdf在线预览的示例代码
11-21
但是感觉这样直接进去有点不太优雅，于是找找看看有没有什么现成的组件，发现有vue-pdf这个组件，虽然说它没有原生那样强大，比如不支持pdf文字复制，打印会乱码，但是我感觉已经足以满足我的需求了。本篇笔记循序渐...
vue2 ElementUI 表单标签、表格表头添加问号图标提示
扶摇的博客
12-06 1万+
使用element-ui有时候需要对表格的表头、表单的标签进行自定义，添加问号的悬浮提示。 https://element.eleme.cn/#/zh-CN/component/tooltip 代码： 实现效果： 官网明确定义了↓↓↓通过slot插槽完成content内容的定义，如上面代码 div 里面的内容：一定要注意插槽的使用方式，未定义的插槽不能使用哦！ 4. 延申 自定义表单标签的label，显示问号提示信息 代码： 实现效果：使用的插槽：https://element.
vue项目中点击登录跳转，url中自动加上了问号
qq_40244663的博客
12-18 2961
vue项目中点击登录跳转，url中自动加上了问号 问题描述： 当我登录系统的时候，页面的确跳转了，但是浏览器地址栏的url里多了一个问号，而这并不影响页面显示，像下面这样 原因： <form action=""> <div class="login_box_input"> <input type="text" class="form-control pull-left" v-model="loginData.user_name"> <input
解决关于 vue项目中 点击提交按钮路由多了个问号
森海北屿 ღ
03-09 2210
问题描述： 在vue项目开发过程中，新建参数表以表单形式提交，发现页面重新刷新，路径中多了问号 http://localhost:8100/#/ 改变为 http://localhost:8100/?#/ 导致路由跳转出现问题。 原因： 这里是 form 表单，点击了button 按钮，触发了他的默认事件，就是触发了提交这个行为。 解决方案 使用@click.prevent 阻止默认事件 &lt...
springboot+vue项目前后端增加数据文字变问号，数据库数据也是问号
weixin_43267086的博客
03-19 1526
做项目的过程中遇到写入数据变？， 数据库也是 在检查后台代码的时候，发现application.properties文件中的spring.datasource.url没有设置成utf-8 改完后：
vue-pdf 预览乱码问题
MyCloisonne的博客
08-30 1544
解决方法： 1、找到安装的依赖文件夹vue-pdf，把node_modules > vue-pdf > src > pdfjsWrapper.js替换为以下文件内容: import { PDFLinkService } from 'pdfjs-dist/es5/web/pdf_viewer'; var pendingOperation = Promise.resolve(); export default function(PDFJS) { function isPDF
pdf.js插件乱码问题
热门推荐
Ibex-Relieved的专栏
08-16 1万+
场景描述：本问题也是之前谈论的pdf转化为图片的项目，之前有聊到过由于不能正常展示印章而把pdf转化成了PNG图片来展示。而其他的条款由于没有印章这个问题，所以就使用了pdf.js这个插件进行展示，之前展示的文件名都是用的英文是没有问题的。但是后来发现ios里面会展示出来这个名字，被用户看到后不便于理解，所以就想着要改为中文，那么问题就来了。具体操作解决方案接着说，直接将文件名改成中文后，发现一切并
vueshowpdf插件预览中文pdf出现乱码问题+pdf.js加载bcmap文件404报错
chenrongchun89的博客
08-13 9806
vue项目中使用到pdf在线预览，使用了vueshowpdf，测试pdf是好好的，但是当上传到服务器出现预览的pdf乱码问题，很是纠结，网上找了好多资料没有，于是找找pdf相关的pdf预览乱码（中文乱码）问题解决方案。   之前也试过pdf.js插件本地测试，当去掉cmaps文件夹之后PDF会乱码，添加之后又好了。查看.bcmap文件原来时候字体有关系的，于是估计就是字体问题。   解决方...
uniapp 使用 vue-pdf预览pdf 并制定 vue-pdf插件的版本
最新发布
11-20
以下是在uni-app中使用vue-pdf预览pdf并指定vue-pdf插件版本的方法： 1. 安装vue-pdf插件 ```shell npm install vue-pdf@0.8.13 --save ``` 2. 在需要使用pdf预览的页面中引入vue-pdf组件 ```vue <template> <div> <pdf :src="pdfUrl" :page="1" :total-pages="totalPages"></pdf> </div> </template> <script> import pdf from 'vue-pdf' export default { components: { pdf }, data() { return { pdfUrl: 'http://cn.createpdfonline.org/pdffiles/test(20211215094117).pdf', totalPages: 0 } }, mounted() { this.$nextTick(() => { this.totalPages = this.$refs.pdf.numPages }) } } </script> ``` 3. 在mounted钩子函数中获取pdf总页数 ```vue mounted() { this.$nextTick(() => { this.totalPages = this.$refs.pdf.numPages }) } ``` 4. 在页面中使用vue-pdf组件 ```vue <pdf :src="pdfUrl" :page="1" :total-pages="totalPages"></pdf> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值