pdf.js Warning: Error during font loading: Buffer is not defined

linxuanyao commented 2 years ago

import Pdf from 'vue-pdf';
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js';

mounted(){
    const url = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-07279c01-e99c-4d17-8bf1-b56b95573b02/5cc589bf-a374-4db5-8df5-f6155fdc94d3.pdf'
    this.src = Pdf.createLoadingTask({ url, CMapReaderFactory })
}

I deal with Chinese garbled characters, when the "@vue/cli-service": "~5.0.0" version was 5, the console prompts this error, I guess it is the buffer-loader.js of vue-pdf, because 'export default buffer 'is used in it. This is not recognized in the new vue-cli

linxuanyao commented 2 years ago

如果遇到同样的问题, 把代码拉到本地, 手动解决一下, 在buffer-loader.js文件, 添加 const { Buffer } = require('buffer'); @vue/cli-service@5, 需要手动引入一下缓冲器, 之前旧版本没有这个问题

XPC11059 commented 2 years ago

在哪个文件定义 const { Buffer } = require('buffer'); 呀？最近也遇到这个问题，一直无解

linxuanyao commented 2 years ago

在哪个文件定义 const { Buffer } = require('buffer'); 呀？最近也遇到这个问题，一直无解

// buffer-loader.js文件, 
return 'export default Buffer.from("' + data.toString('base64') + '", "base64")'; 
// 修改为 
return ' const { Buffer } = require('buffer'); export default Buffer.from("' + data.toString('base64') + '", "base64")';

linxuanyao commented 2 years ago

或者这么改, 我后来使用pdf-dist的虚拟滚动, 性能非常好, 代码不全, 可以参考pdf.js

// 这边源码写了这个, 感觉好像没什么用
// var loaderUtils = require('loader-utils');
const { Buffer } = require('buffer');

module.exports = function(content) {

    // var options = loaderUtils.getOptions(this);

    let data;
    if ( content instanceof Buffer ){
        data = content;
    } else {
        data = Buffer.from(content);
    }

    // console.log( data );

    return `export default '${data.toString('base64')}'`
    // return 'export default Buffer.from("' + data.toString('base64') + '", "base64")';
}

module.exports.raw = true;

...
import { getDocument, GlobalWorkerOptions, CMapCompressionType } from 'pdfjs-dist/legacy/build/pdf';
const { Buffer } = require('buffer');

// 加载文档
const loadingTask = getDocument({
  data,
  CMapReaderFactory: function () {
    this.fetch = function(query) {
      const bcmap = require('./buffer-loader!pdfjs-dist/cmaps/' + query.name + '.bcmap')
      const cMapData = Buffer.from(bcmap.default, 'base64')
      return {
        cMapData,
        compressionType: CMapCompressionType.BINARY,
      };
    }
  },

  ...
});

githubzjx2016 commented 1 month ago

看起来这问题一直都有，就是不支持vite

FranckFreiburger / vue-pdf

pdf.js Warning: Error during font loading: Buffer is not defined #382