vue-pdf src属性可以加载 pdf.createloadingtask返回的数据吗
时间: 2023-07-20 20:35:23 浏览: 63
`vue-pdf` 组件的 `src` 属性只能接受字符串类型的 URL,因此无法直接加载 `pdfjs-dist` 的 `createLoadingTask` 方法返回的 PDF 数据。
如果想要使用 `src` 属性加载 `pdfjs-dist` 的 `createLoadingTask` 方法返回的 PDF 数据,可以将该数据先转换成 Data URL,然后将 Data URL 作为 `src` 属性的值,示例代码如下:
```javascript
import { createLoadingTask } from 'pdfjs-dist';
import VuePdf from 'vue-pdf';
// 创建加载 PDF 数据的 Promise 对象
const loadingTask = createLoadingTask('https://example.com/path/to/pdf');
// 等待加载完成
loadingTask.promise.then(typedArray => {
// 将 TypedArray 对象转换成 Data URL
const dataUrl = `data:application/pdf;base64,${btoa(String.fromCharCode(...new Uint8Array(typedArray)))}`;
// 将 Data URL 作为 src 属性的值
new Vue({
el: '#app',
components: {
VuePdf,
},
template: '<vue-pdf :src="pdfUrl"></vue-pdf>',
data() {
return {
pdfUrl: dataUrl,
};
},
});
});
```
在上面的示例中,我们使用 `createLoadingTask` 方法创建了一个加载 PDF 数据的 Promise 对象,然后等待加载完成。一旦加载完成,我们将 TypedArray 对象转换成 Data URL,并将其作为 `src` 属性的值传递给 vue-pdf 组件以进行显示。注意,这里我们使用了 `btoa` 方法将 TypedArray 对象转换成字符串,然后使用 `String.fromCharCode` 方法将字符串转换成 Unicode 编码的字符数组,最终将字符数组传递给 `Uint8Array` 构造函数以创建 TypedArray 对象。