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
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
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.
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: