前端vue实现PDF预览

最新推荐文章于 2024-07-29 15:31:57 发布

易de

最新推荐文章于 2024-07-29 15:31:57 发布

阅读量1.3k

点赞数

分类专栏： vue 经验文章标签： vue.js

本文为博主原创，未经博主允许不得转载。如有问题，欢迎指正。

本文链接：https://blog.csdn.net/qq_45021462/article/details/119702565

版权

本文介绍了在前端使用Vue.js实现PDF预览的三种方法：通过a标签、iframe标签和pdfjs-dist插件。a标签需使用文件的绝对路径，iframe可直接在页面展示，而pdfjs-dist插件提供了更灵活的控制选项。

摘要由CSDN通过智能技术生成

一、使用a标签

<a href="http://xxx.xx.cn/test1.pdf">pdf</a>

注意，href地址必须是文件的绝对位置，相对位置不可以。也就是说url写为"…/assets/pdf/test1.pdf"，这样访问不到PDF文件。
点击链接在新窗口打开预览PDF文件，和使用浏览器输入文件地址打开文件一样。

二、使用iframe标签

<div class="iframe-pdf">
		<iframe src="http://xxx.xx.cn/test1.pdf"></iframe>
		<iframe src="http://xxx.xx.cn/test2.pdf"></iframe>
</div>

这种会直接在页面展现出PDF文件

三、使用pdfjs-dist插件

<template>
  <div>
    <div id="the-canvas"></div>
  </div>
</template>

<script>
import PDFJS from "pdfjs-dist";
import { TextLayerBuilder } from "pdfjs-dist/web/pdf_viewer";
import "pdfjs-dist/web/pdf_viewer.css";
PDFJS.GlobalWorkerOptions.workerSrc = "