vue预览本地pdf文件.

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、需求
  • 二、实现步骤
    • 1.整理对应json文件存放在本地
    • 2.编写界面和逻辑代码,代码对应界面的级联选择
    • 3.把文件放入pbulic路径下的file文件下(这样的文件不会被打包编译,可以发到线上直接访问到,显示出来.放在src下被编译后就不能显示pdf了)
    • 2.封装对应预览pdf的组件,由于项目特殊需要在浙政钉上运行,所以使用了vue-pdf和pdfh5插件.如果只是在浏览器上运行可直接用iframe
  • 三、总结


前言

提示:这里可以添加本文要记录的大概内容:
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。


提示:以下是本篇文章正文内容,下面案例可供参考

一、需求

点击对应社区,出现对应社区的pdf政策文件.


vue预览本地pdf文件._第1张图片

二、实现步骤

1.整理对应json文件存放在本地

vue预览本地pdf文件._第2张图片

2.编写界面和逻辑代码,代码对应界面的级联选择

vue预览本地pdf文件._第3张图片

3.把文件放入pbulic路径下的file文件下(这样的文件不会被打包编译,可以发到线上直接访问到,显示出来.放在src下被编译后就不能显示pdf了)

vue预览本地pdf文件._第4张图片

2.封装对应预览pdf的组件,由于项目特殊需要在浙政钉上运行,所以使用了vue-pdf和pdfh5插件.如果只是在浏览器上运行可直接用iframe

vue预览本地pdf文件._第5张图片

vue预览本地pdf文件._第6张图片

三、总结

整理json文件要整理好,路径要配对,。pdf的文件需要放在pubilc下,避免被build打包丑化,从而无法访问。pdf文件需要上传到服务器。

你可能感兴趣的:(vue.js,大图显示,web前端,vue.js,前端,javascript)