问题-vue预览页面导出

最新推荐文章于 2023-04-12 17:05:49 发布
最新推荐文章于 2023-04-12 17:05:49 发布
阅读量399 收藏
点赞数
分类专栏： 开发问题 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fortunatelx/article/details/126350069
版权

(68条消息) vue实现HTML转PDF (已解决清晰、页边距、图片导出等问题)_前端辣么菜的博客-CSDN博客 

        具体实现方法见上链接

        目前网上比较流行的将页面截图生成pdf的方式里，html2canvas+jspdf经我评测是最好用效果最好的，其他的不是只能截图导出当前页面就是效果特别不清晰，而这种方式可以按照指定dom来截取生成pdf，不是只能截取当前页面，还可以截取当前看不到的页面，适用于预览按钮和导出按钮在同一页面的功能 

         坑1：项目中使用core-js版本为2.6.12    babel-polyfill版本为6.26.0

        开发vue的core-js版本为2.6.12，jspdf中依赖的是最新版本3.x，就会导致启动vue的时候报  Can't resolve 'core-js/shim' in  \babel-polyfill\lib'；

        core-js升级到3以后，就会报Can‘t resolve ‘core-js/modules/es.symbol‘ ，与现有vue依赖包冲突，打包都打不了

解决办法：

        将jspdf中的polyfills.umd.js和jspdf.umd.js上传到服务器上，通过下面这种方式来引用，干掉jspdf依赖包，core-js版本不变还是为2.6.12，htmlToPdf.js中的new JsPDF改成window.jspdf.jsPD

最低0.47元/天 解锁文章
灰烬之灵新
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Pr：导出页面之预览与摘要窗口
qq_41176800的博客
12-16 863
使用“预览”窗口，可在导出前预览媒体，设置自定义的持续时间，如果导出为不同的帧大小，还可以控制源视频适应输出帧的方式。使用“摘要”窗口，可以快速查看源及输出的音视频信息。◆◆◆预览窗口范围Range可自定义导出视频的持续时间。整个源Entire Source导出序列或剪辑的整个持续时间。源入点/出点Source In/Out如果在序列或剪辑中设置了入点/出点，则会将这些设置用于导出。工作...
使用vue预览导出Word文件
gys9895的博客
04-13 469
使用vue预览Word文件
vue 导出、导入excel、文件、预览笔记
qq_38388578的博客
04-12 4291
【代码】vue 导出、导入excel、文件、预览笔记。
vue打包或启动时，报错：Can‘t resolve ‘core-js/modules/es.regexp.exec.js‘
weixin_39266845的博客
07-12 2960
vue打包或启动时，报错：Can't resolve 'core-js/modules/es.regexp.exec.js'
vue中控制台报错：Can‘t resolve ‘core-js/fn/promise‘
qq_51214864的博客
02-19 1267
vue中控制台报错：Can't resolve 'core-js/fn/promise'
Can‘t resolve ‘core-js NPM 引入 core js 失败 解决
googlehemingzhe的博客
04-21 2266
今日项目 LARAVEL VUE 中使用 composer install 打开 npm mix 的时候报错 提示Can‘t resolve ‘core-js 错误 看提示 是 core-js 2版本 错误太多 废弃 随即升级 到 3 以上版本 npm install core-js@3.6.4
Vue将页面导出为图片或者PDF
10-16
在某些场景下，我们可能需要将Vue应用中的页面导出为图片或PDF格式，以便于保存、分享或打印。本篇文章将详细讲解如何在Vue项目中实现这两种功能。 首先，我们要解决的是将页面导出为图片。这通常涉及到HTML到图片...
vue实现pdf导出解决生成canvas模糊等问题(推荐)
11-29
htmlTitle: '页面导出PDF文件名', }; }, }; ``` 然而，可能会遇到 PDF 输出模糊的问题，这通常是由于 canvas 渲染质量不高导致的。为了解决这个问题，我们可以采用以下策略：增大 canvas 的 `width` 和 `height`...
Vue实现页面添加水印功能
10-16
本文将详细介绍如何在Vue项目中实现页面添加水印功能。 首先，我们需要创建一个名为 `watermark.js` 的文件，用于封装水印的生成逻辑。在文件中定义了一个名为 `watermark` 的对象，并提供了一个 `setWatermark` ...
model-vue:用StackBlitz创建:high_voltage:
03-05
6. **路由管理**：对于多页面应用，Vue Router是官方推荐的路由解决方案，它可以帮助我们实现页面间的导航和状态管理。 接下来，我们看看如何在StackBlitz上创建Vue项目： 1. **访问StackBlitz**：首先打开...
vue，html转pdf,下载导出及打印
08-09
最后，我们可以在 Vue 组件中使用上面的函数来实现打印页面。我们可以在模板中添加一个容器，然后使用 ref 将容器的内容转换为图片，并将图片转换为 PDF： ``` <!-- 这里就是要变成图片的容器 --> ...
使用 jsPDF 创建 PDF 文档
allway2的博客
11-28 4174
介绍 在上一篇文章使用 PDF.js 库显示 PDF 文件中，我们展示了如何在 HTML 画布上显示 PDF 文件。在本文中，我们将展示如何从头开始创建 PDF 文件。我们将使用jsPDF图书馆为此目的。您可以仅从GitHub 存储库下载最新的库版本或者从官网.不幸的是，该库的文档很差，所以我们将描述最重要的 API。 先决条件 我们必须下载最新版本的库并将其包含在 HEAD 或 BODY 部分的末尾。 <head> <script src="js/jspdf.js"&.
前端pdf插件JSPDF.JS的简单使用及引入中文字库
qq_40051434的博客
09-06 1万+
JSPDF.JS引入中文字库引入jspdf.js写个简单的例子添加中文字库（ttf转js）直接引入ttf文件（未完成） 引入jspdf.js github地址：https://github.com/MrRio/jsPDF 引入在线的库 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js...
jspdf用法
热门推荐
weixin_42333548的博客
07-28 5万+
介绍一下纯jspdf用法，将一个图片列表导出为pdf文件，根据图片宽高计算在pdf中的位置 jsPDF 是一个基于HTML5的客户端解决方案，用于生成各种用途的 PDF 文档。 官网地址：https://rawgit.com/MrRio/jsPDF/master/docs/ 1、安装：npm install jspdf 2、引入：import jsPDF from "jspdf" 3、使用： let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]); 第一..
Module not found: Error: Can‘t resolve ‘core-js/modules/es.error.cause.js‘
字节叔叔
01-06 2791
在自己笔记本上运行好好的，没什么问题，在jenkins编译的电脑上就出现了Can't resolve 'core-js/modules/es.error.cause.js' 我用的core-js@3.19.1版本有点老了，不再维护了。 我的jenkins服务器上面的node版本比笔记本的高，高版本的node对低版本的core-js支持不行。
Can't resolve 'core-js/modules/的问题
chaogaoxiaojifantong的博客
03-01 8975
3版本有问题，回退到"core-js": "2.6.5"版本
Module not found: Error: Can‘t resolve ‘ core -js/modules/es. error .cause.js‘
weixin_65558544的博客
10-27 5024
在webpack中进行polyfill 的设置，从而去处理Js 的兼容性在webpack4不太需要处理polyfill, 因为默认情况已经将polyfill加进去了，正是因为这个，所以让我们的打包之后的产出内容会特别的大.在webpack5就已经移出了polyfill了，那你想用就得安装并配置了 polyfill.我期望在打包过后，对着promise 这些类做一个，类的声明，ie一些老的版本可以进行兼容。其中我们babel也有preset-env 但是这个预设，他能转换的语法非常的有限。
Can‘t resolve ‘core-js/modules/es.symbol‘ in
guoqing的博客
09-17 3447
启动项目时，遇到的一个神奇的bug 看情况好像是 core2.0 与 core-js 3.0 都会同时调用到的问题 在windows电脑上会出现，同样的项目mac电脑上未出现这种情况 尝试解决方法： 回退 core版本为2.6.5 已经是2.6.5了， 无效~ 重新安装 core cnpm install core-js@2 无效~ 升级到core 3.5.6版本 cnpm install core-js@3.5.6 无效~ ...
Error: Cannot find module 'core-js/library/fn/get-iterator'解决方案
yhy_的博客
02-02 1万+
把node_modules 删了 重新  cnpm install 或者 npm install 安装一下就可以解决了 据我分析可能是npm包的问题。
vue-print-nb开启预览
最新发布
05-14
vue-print-nb 是一款用于在 Vue.js 项目中实现打印功能的插件。使用该插件可以方便地将页面内容以 PDF 或图片格式导出，同时还支持预览功能。下面是使用 vue-print-nb 开启预览的方法： 1. 安装 vue-print-nb 插件：在项目中运行以下命令安装该插件。 ``` npm install vue-print-nb --save ``` 2. 在需要使用打印功能的组件中引入 vue-print-nb 插件。 ``` import Print from 'vue-print-nb' ``` 3. 在组件中定义一个打印方法，该方法中调用 vue-print-nb 提供的 `print` 方法实现打印功能。同时，该方法还需要传入一个参数，用于控制预览功能的开启和关闭。 ``` methods: { printPreview () { // 开启预览 this.$print(this.$refs.print, { preview: true }) }, printPDF () { // 关闭预览 this.$print(this.$refs.print, { preview: false }) } } ``` 在上面代码中，`this.$refs.print` 表示需要打印的元素，`preview` 参数为 `true` 表示开启预览功能，为 `false` 表示关闭预览功能。 4. 在组件模板中添加打印按钮，并绑定上面定义的打印方法。 ``` <button @click="printPreview">预览</button> <button @click="printPDF">打印</button> ``` 在上面代码中，`printPreview` 方法用于开启预览功能，`printPDF` 方法用于关闭预览功能并直接打印。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值