vue3项目打开一个html文件

1,568 阅读2分钟

这东西实现很简单,路径写对了就行了,先贴一下解决办法。

1.在public文件夹新建test.html.

2.在页面引用,注意不要写什么../../public/test.html之类的,直接就写

window.open("/test.html")

然后就打开了

作为自己的笔记,记一下这个问题完整的思路。

首先业务需求是从淘宝那个已买的物品那复制然后拿取里头的图片订单等信息。我开始想复制完了直接读取剪贴板内容拿到就行了,所以我用navigator.clipboard.read()想要获取剪贴板内容

这里曹丹的是,明明文档写可以拿到里头内容,我用navigator.clipboard.readText()也能获取文字,但是navigator.clipboard.read()这个方法我怎么整都没获取到里头的图片,希望有人能指点一二。

获取剪贴板失败我就想先把淘宝复制到的内容放在dom里然后获取,这样再获取dom里的图片,这样确实成功了,但是操作起来有点麻烦且不美观。我就想用一个富文本,复制进富文本里,这样可以保留格式,而且还可以在富文本直接修改数据,经过几个富文本的取舍,有的富文本将淘宝那个地址复制进去一些类似表格的格式就变了比如quill等,最终找到一个富文本插件 summernote.org/ 这个插件很轻量并且可以将格式完整保留下来像这样

但是问题又来了,这玩意是基于jQuery、bootstrap、fontawesome,这些玩意儿在vue里安装引用好麻烦并且我也不想引入这么多这些东西,于是我想要是能打开一个html文件,用link引就好多了,所以有了以上问题。注意新建的html要放在跟index.html一个路径下,并且打开时候不能用相对路径那样找,那样会导致vue-route以为是在打开项目内的组件而报错,我也搞了好一会儿才发现。

后续:

如果要嵌入还是那么操作,在页面上

<iframe src="/test.html" frameborder="0"></iframe>

就可

如果要下载一个文件(文件放在前端项目,当然没有这么操作的,我也是被后端逼得),也是将文件放在public下(vue-cil2放在static下),然后

window.location.href = "/test.xlsx";