• vue移动端项目渲染pdf步骤


    第一步:引入pdf包 

    import pdf from "vue-pdf-signature";,这里不引入vue-pdf的包后面再做解释

    import CMapReaderFactory from "vue-pdf-signature/src/CMapReaderFactory.js";

    (CMapReaderFactory)解决汉字空白的问题

    第二步:页面的component注册pdf组件

    1. components: {
    2. pdf
    3. },

    第三步:页面放置pdf盒子       

    1. <pdf :src="pdfSrc">pdf> // pdfSrc为pdf包处理过后的预览链接

    第四步:页面请求加载pdf之前可以写一个loading的方法,这里用的vant提示,无需要可不写

    1. slowLoading() {
    2. var _this = this
    3. const toast = Toast.loading({
    4. duration: 0, // 持续展示 toast
    5. forbidClick: true,
    6. message: "正在生成您的权益单,请稍等...",
    7. className: "loading"
    8. });
    9. let tips = [
    10. '正在生成您的权益单,请稍等...',
    11. '权益单文档生成时间较长,请耐心等待',
    12. '您可以选择年度查询']
    13. let strlen = tips.length;
    14. _this.tipTimer = setInterval(() => {
    15. let index = Math.floor(Math.random() * strlen);
    16. toast.message = tips[index];
    17. }, 3000);
    18. }

    第五步:引入处理pdf下载的方法

    1. // _this.pdfUrl是后端返回的pdf链接
    2. // _this.pdfSrc声明空变量对处理的过的pdf链接进行接收绑定给页面的pdf组件的src属性
    3. loadPdf() {
    4. var _this = this;
    5. _this.pdfDownloadUrl = _this.pdfUrl + "?isDownload=1";
    6. console.log(_this.pdfDownloadUrl);
    7. _this.pdfSrc = pdf.createLoadingTask({
    8. url: _this.pdfUrl,
    9. // 没有生效,需要确认原因并修改
    10. onProgress: function (status) {
    11. let ratio = status.loaded / status.total;
    12. console.log("加载进度.." + ratio);
    13. },
    14. //cMapUrl: `https://cdn.jsdelivr.net/npm/pdfjs-dist@^2.5.207/cmaps/`,
    15. cMapPacked: true,
    16. CMapReaderFactory
    17. });
    18. //加载完PDF后对缓存进行清除
    19. for (var key in require.cache) {
    20. if (key.indexOf('bcmap') >= 0) {
    21. delete require.cache[key];
    22. }
    23. }
    24. // _this.pdfSrc = _this.loadingTask;
    25. // console.log(_this.pdfSrc, 'src');
    26. _this.pdfSrc.promise.then(pdf => {
    27. console.log(pdf)
    28. console.log("pdf 加载成功...");
    29. Toast.clear();
    30. clearInterval(_this.tipTimer);
    31. },
    32. err => {
    33. console.log("rejected: ", err);
    34. clearInterval(_this.tipTimer);
    35. Toast.clear();
    36. Toast.fail({
    37. message: '权益单生成失败,请重试',
    38. forbidClick: true,
    39. duration: 2,
    40. });
    41. });
    42. },
    1. reloadPdf() {
    2. this.slowLoading();
    3. this.loadPdf()
    4. },
    5. this.reloadPdf()

    vue-pdf的插件在使用的过程中是连连踩坑的,基本遇到3个问题:
    1、PDF中文不显示
    2、PDF签章没显示出来
    3、第二次打开PDF的时候会遇到PDF空白的问题

    问题1,通过引入CMapReaderFactory.js解决问题,但是这会引起问题3的出现

    问题2,pdf签章不显示出来

    1. //pdf.worker.js
    2. if (data.fieldType === 'Sig') {
    3. data.fieldValue = null;
    4. //注释此行代码即可
    5. //_this3.setFlags(_util.AnnotationFlag.HIDDEN);
    6. }

    问题3,页面空白

    CMapReaderFactory文件中加一行delete代码,加载完语言文件后清除缓存就好了

    1. import { CMapCompressionType } from 'pdfjs-dist-sign/es5/build/pdf.js'
    2. // see https://github.com/mozilla/pdf.js/blob/628e70fbb5dea3b9066aa5c34cca70aaafef8db2/src/display/dom_utils.js#L64
    3. export default function() {
    4. this.fetch = function(query) {
    5. /* webpackChunkName: "noprefetch-[request]" */
    6. return import('./buffer-loader!pdfjs-dist-sign/cmaps/'+query.name+'.bcmap').then(function(bcmap) {
    7. //加载完语言文件后清除缓存
    8. delete require.cache[require.resolve('./buffer-loader!pdfjs-dist-sign/cmaps/'+query.name+'.bcmap')];
    9. return {
    10. cMapData: bcmap.default,
    11. compressionType: CMapCompressionType.BINARY,
    12. };
    13. });
    14. }
    15. };

    vue-pdf的包是需要上面这么处理的,但是我在网上get到这么一个包,是其他人在vue-pdf包的基础上做的改善,所以不想麻烦的宝贝可以直接下载我最开始说的那个包就OK了(vue-pdf-signature)

  • 相关阅读:
    计算机毕业设计jsp家校互动系统Myeclipse开发mysql数据库web结构java编程计算机网页项目
    网络运维的重要性
    112二二位
    简化任务调度与管理:详解XXL-Job及Docker Compose安装
    葡萄糖-聚乙二醇-牛血清白蛋白,BSA-PEG-Glucose,牛血清白蛋白-PEG-葡萄糖
    【LeetCode-202】快乐数
    MongoDB基础学习(五)之在Springboot项目使用MongoTemplate进行操作
    DSA之图(4):图的应用
    微信公众号推文怎么做?
    猿创征文 第二季| #「笔耕不辍」--生命不息,写作不止#
  • 原文地址:https://blog.csdn.net/luoxiaonuan_hi/article/details/126352575