将本地的pdf文件添加到canvas中-fabric.js的使用-参考官网

导入文件

  <div>
        <input type="file" accept="application/pdf">
    </div>

input type=“file” 属性

multiple

multiple="multiple" 

可以接受多个值的文件上传

accept

accept="application/pdf"

限定文件上传的类型
也可以定义多个文件类型，用逗号进行隔开
但注意不要将这个属性作为唯一的验证工具，应该在服务器上对文件进行验证

<canvas id="canvas" width="300px" height="200px"></canvas>

import {
    fabric } from 'fabric'
    mounted() {
   
        const canvas = this._canvas = new fabric.Canvas('canvas', {
   
            width:600,height:600 //发现在这里面设置canvas的高度和宽度才有效
        })

添加元素

        const text = new fabric.Text('Upload PDF')
        canvas.add(text)

监听input事件

只要输入的值变化了就会触发input事件，当文件上传完成后就会触发

        <input type="file" accept="application/pdf" @input="input">
            methods: {
   
        input() {
   
        console.log('2');
    },

因为是在methods里面定理的事件，需要处理canvas和text，因此需要对数据进行重新修改

data() {
   
    return {
   
        text: {
   },
        canvas: {
   }
    }
    },
    mounted() {
   
        this.canvas = this._canvas = new fabric.Canvas('canvas', {
   
            width:600,height:600
        })
        this.text = this._text= new fabric.Text('Upload PDF')
        this.canvas.add(this.text)
    },
  
    methods: {
   
        input(e) {
   
            console.log(this.text);
            this.text.set('text','loading...')
        console.log(e.target);
    },

设备像素比

const scale = 1 / window.devicePixelRatio

设备像素比返回了设备上的物理像素和当前设备CSS像素的一个壁纸，也就是说明浏览器多少屏幕实际的像素点被用来画了一个CSS像素点

window.devicePixelRatio = 物理像素 / css像素
常用来修正canvas的像素比

安装pdfjs-dist

npm install --save pdfjs-dist@2.0.943

Blob对象表示一个不可变、原始数据的类文件对象

自己理不清楚了，先全部拷贝试一下

 <div>
        <input type="file" accept="application/pdf">
    </div>
    <canvas id="c" width="500" height="620">
    </canvas>
    <script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
    <script src="https://unpkg.com/fabric@4.6.0/dist/fabric.min.js"></script>
    <script>
        const Base64Prefix = "data:application/pdf;base64,";

        function getPdfHandler() {
   
            console.log(window['pdfjs-dist/build/pdf']);
            return window['pdfjs-dist/build/pdf'];
        }

        function readBlob(blob) {
   
            return new Promise((resolve, reject) => {
   
                const reader = new FileReader();
                reader.addEventListener('load', () => resolve(reader.result));
                reader.addEventListener('error', reject)
                reader.readAsDataURL(blob);
            })
        }

        async function p