个人cms网站,wordpress怎么上传pdf,网站正能量,网络做网站如何盈利sunsetglow/vue-pdf-viewer
开箱即用的pdf插件sunsetglow/vue-pdf-viewer, vue3 版本 无需多余开发#xff0c;操作简单#xff0c;支持大文件 pdf 滚动加载#xff0c;缩放#xff0c;左侧导航#xff0c;下载#xff0c;页码#xff0c;打印#xff0c;文本复制sunsetglow/vue-pdf-viewer
开箱即用的pdf插件sunsetglow/vue-pdf-viewer, vue3 版本 无需多余开发操作简单支持大文件 pdf 滚动加载缩放左侧导航下载页码打印文本复制等功能 移动端展示 举个栗子
首先就是我们先去安装我们的npm 包
yarn add sunsetglow/vue-pdf-viewer
npm i sunsetglow/vue-pdf-viewer
pnpm i sunsetglow/vue-pdf-viewer话不多说直接上代码 templatediv idpdf-container/div
/template
script langts setup
import { initPdfView } from sunsetglow/vue-pdf-viewer;
import sunsetglow/vue-pdf-viewer/dist/style.css;
import { onMounted } from vue;
const loading ref(false);
const pdfPath new URL(sunsetglow/vue-pdf-viewer/dist/libs/pdf.worker.min.mjs,import.meta.url
).href;
onMounted(() {loading.value true;initPdfView(document.querySelector(#pdf-container) as HTMLElement, {loadFileUrl: https:xxx.pdf, //文件路径pdfPath: pdfPath, // pdf.js 里需要指定的文件路径loading: (load: boolean) {loading.value load;//加载完成会返回 false},pdfOption: {scale: true, //缩放pdfImageView: true, //pdf 是否可以单片点击预览page: true, //分页查看navShow: true, //左侧导航navigationShow: false, // 左侧导航是否开启pdfViewResize: true, // 是否开启resize 函数 确保pdf 根据可视窗口缩放大小toolShow: true, // 是否开启顶部导航download: true, //下载clearScale: 1.5, // 清晰度 默认1.5 感觉不清晰调大 ,当然清晰度越高pdf生成性能有影响fileName: preview.pdf, // pdf 下载文件名称lang: en, //字典语言print: true, //打印功能customPdfOption: {// customPdfOption是 pdfjs getDocument 函数中一些配置参数 具体可参考 https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html#~DocumentInitParameterscMapPacked: true, //指定 CMap 是否是二进制打包的cMapUrl: https://cdn.jsdelivr.net/npm/pdfjs-dist2.2.228/cmaps/, //预定义 Adobe CMaps 所在的 URL。可解决字体加载错误},textLayer: true, //文本是否可复制 文本复制和点击查看大图冲突建议把 pdfImageView 改为false},});
});
/scriptstyle scoped
#pdf-container {width: 100%;padding: 0px;height: 100%;
}
/style 最简单ctrlc ctrlv 但是我们需要注意的是pdfPath这个参数 pdfPath 需要一个指向 pdf.worker.min.mjs 文件的路径 做完以上步骤我们大功告成了 参数说明
参数名称内容 说明loadFileUrl文件地址必选pdfPathpdf.js 里所需的 pdf.worker.min.mjs 指向地址必选pdfOptionpdf 的配置选项 可选loadingpdf 加载完成执行函数 可选
如果该插件对你有帮助希望可以去 github 去帮忙点个Star
