js预览PDF文件，使用iframe实现

标签：items   padding   set   info   otto   标签   justify   rap   hit   有时候需要预览PDF文件，需要实现可放大、缩小、下载、打印等功能，我使用了iframe框架。 实现效果：         实现代码： 我直接写在了一个公共组件中，在需要预览的页面直接引用该子组件即可。 data() { return { src: ‘http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf‘, } },   完整代码： 文件预览 关闭 export default { data() { return { src: ‘http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf‘, } }, methods: { filePreviewCancel(){ this.$emit(‘filePreviewCancel‘); } } } .filePreview{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; background: rgba($color: #000000, $alpha: 0.4); min-height: 500px; overflow: auto; .filePreview_center{ width: 50%; height: 100%; left: 25%; background: white; border-top-right-radius: 3px; border-top-left-radius: 3px; position: relative; transform: translateY(-50% -50%); padding: 16px; .center_header{ padding-bottom: 10px; border-bottom: 1px solid #dee2ed; display: flex; align-items: center; justify-content: space-between; border-radius: 3px; .header_left{ font-weight: bold; } .header_right{ cursor: pointer; color: #99a1ad; } } .center_center{ border-radius: 3px; width: 100%; height: 100%; } } }   注意： 1.src为服务器上的一个PDF文件地址，可直接下载。 2.只需要一个标签和一个src地址即可实现，不需要再做其他操作，简单好用。   参考文章：https://www.cnblogs.com/steamed-twisted-roll/p/9648255.html  js预览PDF文件，使用iframe实现标签：items   padding   set   info   otto   标签   justify   rap   hit   原文地址：https://www.cnblogs.com/5201314m/p/12323103.html