首页/ 填坑/ 文章详情

uni-app Canvas 可以生成PDF文件图片预览?!

PDF文件预览没有特别的需求,直接跳转PDF链接,Chrome浏览器自动切换PDF文件预览模式。可实际需求,要求模拟出PDF文件预览模式,并对当前页面进行可编辑。

PDF对当前页面可编辑,意味着需要拆分PDF文件,将PDF文件每一页转换成图片,记录每一页操作过后对应的数据,基于PC端使用pdf.j库成功实现的经验,依样葫芦搬移到uip-app开发平台。

Vue<template>
    <view class="container">
        <canvas type="2d" id="myCanvas" canvas-id="myCanvas" style="width: 700px;height: 1058px;"></canvas>
    </view>
</template>

<script>
    const pdfjsLib = require('../../common/js/pdfjs/build/pdf.js');

    export default {
        data() {
            return {}
        },
        onLoad() {
            var path = '../demo.pdf';
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'http://www.didaolan.com/pdf/dist/js/pdfjs/build/pdf.worker.js';

            var loadingTask = pdfjsLib.getDocument(path);
            loadingTask.promise.then(function(pdf) {
                //options.pdf = pdf;

                var pageNum = 1;
                pdf.getPage(pageNum).then(function(page) {
                    var viewport = page.getViewport({ scale: 1.5});
                    var context = uni.createCanvasContext('myCanvas')
//                  var canvas = document.getElementById('myCanvas');
//                  var context = canvas.getContext('2d');

                    console.log('context',context);
                    context.canvas = {};
                    context.canvas.width = 750;
                    context.canvas.height = 1058;
                    var renderContext = { canvasContext: context, viewport: viewport };

                    page.render(renderContext);
                });
            });
        }
    }
</script>

uni-app 重新定义了画布声名,禁用了canvas.getContext('2d')方法,需要用uni.createCanvasContext()方法声名,可数据并不是无缝对接,缺少了width和height的重要属性数据。基于pdf.js库本身早已封装好,在不修改JS库的情况下,尽量保持JS库的原始性,手动补齐缺少数据,于是有了30至32行代码,主动设置画布的宽高。

在渲染画布时,uni-app 还是有一点点的改动,需要用到draw()方法做为最后的渲染,打开pdf.js文件,找到endDrawing方法里最后一行添加this.ctx.draw(); 代码。

几经周折,Canvas画布不再是空白一片,看似离成功不远了。To young to simple,最后发现uni-app 改动不是一点点。生成的Canvas画布需要在小程序端运行,结果生成图片上的文字挤成一团,发生了错位现象,而且画布生成的并不完整,一部份内容被掉失了。

uni-ap使用pdjf.js库生成Canvas图片的方案,生成的图片效果实在太差,继续研发下去,工程量大,程序进度赶不上。最后的最后,决定放弃由前端转换PDF文件为图片,改用后端实现。恩,结果后端大佬三两下搞定前端几天不兼容的问题,so easy,Σ_(꒪ཀ꒪」∠)。

文章评论0 records

最新 最早

0

最新评论Latest comments

HentaiCatHentaiCat 2020-12-30 10:22
考科目二全程很紧张,考了三次才过,有次侧方入库直接pass,100分扣完,呜呜呜~
猫猫酱猫猫酱 2020-11-12 10:56
一入多肉深似海,说多都是泪
soulkunsoulkun 2020-11-05 15:54
IconFont的图标真的很好用!!!
无限链霉球菌无限链霉球菌 2020-11-03 11:41
药店,了解一下(`・ω・´)
HentaiCatHentaiCat 2020-11-02 15:28
(ಡωಡ)很实用,直接拿走...