uniapp-h5文件复制链接，预览，下载等功能_uniapp 复制链接

一、复制链接

主要功能代码：document.execCommand('Copy');

		copy() {
			console.log('复制');
			var inputTest = document.createElement('input');
			inputTest.value = this.copyUrl;
			// inputTest.value='11111111111';
			document.body.appendChild(inputTest);
			inputTest.select();
			document.execCommand('Copy');
			uni.showToast({
				title: '复制成功',
				icon: 'none'
			});
		},

二、文件预览

需求：需要在弹框中显示，所以要能嵌套到ui组件，并且就在本页面打开，不能跳转到新页面

所以用的iframe 标签

<u-popup :show="show_three" :round="10" :zIndex="zIndex_three" style='padding: 40rpx;' @close="close_three" >
			<view class="popup_three" >
				<view class="title">文件预览</view>
				<iframe :src="copyUrl" width='100%' height='400rpx'></iframe></view>
		</u-popup>

最开始用的web-view

但是无法嵌套到其他ui组件中，所以不符合要求

<template v-if='show_three'>
							<view class="" style="padding: 20rpx;">
								<web-view :src="copyUrl" ></web-view>
							</view>
					  	</template> 

pc端中基本没什么问题，但是一到移动端预览就变成了下载

网上找了两种方法

1.上传文件设置请求头， PDF 加载链接添加响应标头：content-type=“application/pdf”

参考：

前端处理二进制文件流，预览图片、PDF_application/pdf_1234Wu的博客-CSDN博客

前端实现window.open实现pdf预览以及请求时携带请求头通过后端权限校验_window.open添加请求头_zxx1126的博客-CSDN博客

关于http标头：如何强制文件在浏览器中打开而不是下载(PDF)？ | 码农家园 (codenong.com) 

文件在线预览HTTP响应头设置_Wu_Menghao的博客-CSDN博客 

2.使用的pdf.js

下载pdfjs包，里面包含了两个文件夹：web和build

路径图片：

 使用：

<iframe :src="fileUrl"  style='height: 500px;width:100%;'></iframe>
 
fileUrl: '/static/pdf/web/viewer.html?file=' ,
 
		preview() {
			console.log('预览',this.copyUrl);
			this.fileUrl += encodeURIComponent(this.copyUrl)
			this.show_three = true;
		},
 
 
<!-- <iframe src="https://www.lilnong.top/static/project/pdfjs-es5-2.5.207/web/viewer-1.html?file=https://www.lilnong.top/static/pdf/B-4-RxJS%E5%9C%A8React%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8-%E9%BE%99%E9%80%B8%E6%A5%A0_.pdf"  style='height: 500px;width:100%;'></iframe> -->

报错：file origin does not match viewer's

解决：注释掉web/viewer.js中下面的代码，不去判断跨域

if (origin !== viewerOrigin && protocol !== 'blob:') {
    throw new Error('file origin does not match viewer\'s');
}

参考：

开始 - PDF.js 中文文档 (gitcode.host)

使用 pdf.js 在网页中加载 pdf 文件 - yinghualeihenmei - 博客园 (cnblogs.com)

在HTML或React中实现PDF文件预览，想要不允许下载等如何设置呢？_网页直接打开pdf 禁止下载_WilliamHong2021的博客-CSDN博客

PDF.js在前后端＜iframe＞标签中在线预览PDF文件的使用心得_lwl827的博客-CSDN博客

uniapp 在线预览pdf文件流(h5)_h5文件流怎么展示_uidshen的博客-CSDN博客 

 下载：利用pdf.js在线展示PDF文档 - 公子小六 - 博客园 (cnblogs.com)

三、文件下载

		downfile() {
			console.log('下载');
			let a = document.createElement('a');
			a.href = this.copyUrl;
			a.download = 'filename';
			a.click();}