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，Σ_(꒪ཀ꒪」∠)。