vue-pdf 可以加载的pdf数据类型
时间: 2023-08-22 18:07:16 浏览: 51
vue-pdf 可以加载以下类型的 PDF 数据:
1. 通过 URL 加载的 PDF 文件
2. 通过 Blob 对象加载的 PDF 数据
3. 通过 ArrayBuffer 对象加载的 PDF 数据
4. 通过 TypedArray 对象加载的 PDF 数据
5. 通过 Data URI Scheme 加载的 PDF 数据
请注意,如果 PDF 数据源不是通过 URL 加载的,则必须使用 data 属性将 PDF 数据传递给 vue-pdf 组件。例如,如果要从 Blob 对象加载 PDF 数据,则需要将 Blob 对象转换为 data URL,然后将其传递给 vue-pdf 组件。
相关问题
vue-pdf src属性可以加载 pdf.createloadingtask返回的数据吗
`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 对象。
vue-pdf-signature预览pdf
vue-pdf-signature是一个用于在Vue项目中预览PDF文件的库。它提供了一个名为pdf的组件,可以轻松地将PDF文件嵌入到你的Vue模板中。你可以通过引入pdf和CMapReaderFactory来使用vue-pdf-signature库。
在模板中,你可以使用<iframe>标签来显示PDF文件。在你的模板中,你需要定义一个ref属性,以便在后面的代码中引用它。你可以将PDF文件的src属性设置为一个变量,以便动态加载不同的PDF文件。
在你的方法中,你可以使用axios库来获取PDF文件的数据。你需要使用 responseType: 'blob' 选项来指定响应数据的类型为blob。然后,你可以创建一个Blob对象,将获取到的数据传递给它,并将其类型设置为'application/pdf'。接下来,你可以使用window.URL.createObjectURL方法创建一个URL,将其设置为iframe的src属性,从而显示PDF文件。
最后,你需要注意的是,如果你想在打印PDF文件时使用浏览器的打印功能,你可以使用window.open方法打开一个新窗口,并将PDF文件的URL作为参数传递给它。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)