Vue-pdf preview pdf content dynamic text loss problem (Warning: Error during font loading: The CMap “baseUrl” parameter must be sp)

Vue-pdf cannot display Chinese solutions

Vue-pdf is a common plug-in for displaying pdf files in vue, and it has better display effects on both PC and mobile terminals. However, if there is Chinese in the loaded pdf, it may not be displayed or garbled , and the error in the console is as follows

Warning: Error during font loading: The CMap “baseUrl” parameter must be specified, ensure that the “cMapUrl” and “cMapPacked” API parameters are provided.

The html is as follows:

 <pdf :src="src"></pdf>

1. First, we first get the backend return stream, such as Please add a picture description
and then convert the returned stream data into url

  find(item) {
    
    
      billExportPdf({
    
    
        id: item.row.id,
      })
        .then((res) => {
    
    

          this.src = this.getObjectURL(res);
        })
        .catch((res) => {
    
    
          console.log(res);
        });
    },
    // 将返回的流数据转换为url
    getObjectURL(file) {
    
    
      console.log(file);
      let url = null;
      if (window.createObjectURL != undefined) {
    
    
        // basic
        url = window.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
    
    
        // webkit or chrome

        try {
    
    
          url = window.webkitURL.createObjectURL(file);
        } catch (error) {
    
    
          console.log(error);
        }
      } else if (window.URL != undefined) {
    
    
        // mozilla(firefox)

        try {
    
    
          url = window.URL.createObjectURL(file);
        } catch (error) {
    
    
          console.log(error);
        }
      }
      return url;
    },

Then it was found that it was not the effect we wanted, and the PDF did not have the data we wanted

Please add a picture description
wrong reason:

When there is Chinese in the PDF file, there may be a problem that the Chinese is not displayed during the process of citing pdfjs , and the following error will be reported in the console. Please add a picture description
The solution

The solution is also relatively simple, import "CMapReaderFactory.js" in the project, the import method is as follows:

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

Then convert the stream data to url, and the CMapReaderFactory method is processing

   // 将返回的流数据转换为url
    getObjectURL(file) {
    
    
      console.log(file);
      let url = null;
      if (window.createObjectURL != undefined) {
    
    
        // basic
        url = window.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
    
    
        // webkit or chrome

        try {
    
    
          url = window.webkitURL.createObjectURL(file);
        } catch (error) {
    
    
          console.log(error);
        }
      } else if (window.URL != undefined) {
    
    
        // mozilla(firefox)

        try {
    
    
          url = window.URL.createObjectURL(file);
        } catch (error) {
    
    
          console.log(error);
        }
      }
      //这里是重点,然后将流数据转换为url,CMapReaderFactory方法在进行处理
      url = pdf.createLoadingTask({
    
     url: url, CMapReaderFactory });
      return url;
    },

Next, we get the data we want, as shown in the figure:

Please add a picture description

Guess you like

Origin blog.csdn.net/m1009113872/article/details/123335462