vue 里如何集成 devExpress 打印查看和打印设计器，写一个基于.net core6的前后端案例

首先，要在Vue项目中集成DevExpress打印查看和打印设计器，需要先安装devexpress-vue包。可以通过以下命令进行安装：

npm install devexpress-vue

接下来，在Vue项目中引入devexpress-vue包：

import Vue from 'vue';
import DevExpress from 'devexpress-vue';
Vue.use(DevExpress);

现在，就可以在Vue组件中使用DevExpress的打印查看和打印设计器了。

下面，是一个基于.NET Core 6的前后端的案例。

后端：

首先，需要创建一个.NET Core Web API项目，并在Startup.cs中添加以下代码以允许跨域请求：

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddDefaultPolicy(builder =>
        {
            builder.WithOrigins("http://localhost:8080")
                .AllowAnyHeader()
                .AllowAnyMethod();
        });
    });
    services.AddControllers();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseCors();
    app.UseRouting();
    app.UseAuthorization();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

然后，创建一个打印请求的控制器：

[ApiController]
[Route("[controller]")]
public class PrintController : ControllerBase
{
    [HttpPost]
    public IActionResult Print([FromBody] PrintRequest request)
    {
        // 处理打印请求
        return Ok();
    }
}

前端：

在Vue项目中，可以通过以下代码创建一个简单的打印请求：

this.$http.post('http://localhost:5000/print', {
    reportName: 'Report1',
    parameters: {
        parameter1: 'value1',
        parameter2: 'value2'
    }
}).then(response => {
    console.log(response);
});

其中，reportName表示报表名称，parameters是一个对象，包含报表中需要的参数。

然后，在打印按钮的点击事件中，使用DevExpress打印查看和打印设计器：

import { Viewer, Designer } from 'devexpress-vue/reporting';
export default {
    components: {
        Viewer,
        Designer
    },
    data() {
        return {
            reportName: 'Report1',
            parameters: {
                parameter1: 'value1',
                parameter2: 'value2'
            },
            showDesigner: false
        };
    },
    methods: {
        print() {
            this.$http.post('http://localhost:5000/print', {
                reportName: this.reportName,
                parameters: this.parameters
            }).then(response => {
                const report = new DevExpress.Reporting.Report();
                report.load(response.data, DevExpress.Reporting.JsonLoadingOptions);
                DevExpress.Reporting.Viewer.view(report, '#reportViewer', { height: '100%' });
            });
        },
        showPrintDesigner() {
            this.showDesigner = true;
        },
        hidePrintDesigner() {
            this.showDesigner = false;
        }
    },
    template: `
        <div>
            <button @click="print">打印</button>
            <button @click="showPrintDesigner">打印设计器</button>
            <viewer id="reportViewer" v-if="!showDesigner" />
            <designer v-if="showDesigner" @close="hidePrintDesigner" />
        </div>
    `
};

其中，print方法发送打印请求，并使用DevExpress打印查看器显示打印结果。showPrintDesigner和hidePrintDesigner方法用于显示和隐藏DevExpress打印设计器。在模板中，使用Viewer和Designer组件来显示DevExpress打印查看器和打印设计器。

这就是一个基于.NET Core 6的前后端集成DevExpress打印查看和打印设计器的案例。